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CAPITULO 1 iQUE ES HTML5? 

HTML5 (HyperText Markup Language, version 5) es la quinta revision del lenguaje HTML. 
Esta nueva version (aun en desarrollo), y en conjunto con CSS3, define los nuevos 
estandares de desarrollo web, redisenando el codigo para resolver problemas y 
actualizandolo asi a nuevas necesidades. No se limita solo a crear nuevas etiquetas o 
atributos, sino que incorpora muchas caracterfsticas nuevas y proporciona una 
plataforma de desarrollo de complejas aplicaciones web (mediante los APIs). 

HTML5 esta destinado a sustituir no solo HTML 4, sino tambien XHTML 1 y DOM Nivel 2. 
Esta version nos permite una mayor interaccion entre nuestras paginas web y el 
contenido media (video, audio, entre otros) asf como una mayor facilidad a la bora de 
codificar nuestro diseno basico. 

Algunas de las nuevas caracterfsticas de HTML5 serfan: 

• Nuevas etiquetas semanticas para estructurar los documentos HTML, destinadas a 
remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de 
la pagina. 

• Los nuevos elementos multimedia como <audio> y <video>. 

• La integracion de graficos vectoriales escalables (SVG) en sustitucion de los 
genericos <object>, y un nuevo elemento <canvas> que nos permite dibujar en el. 

• El cambio, redefinicion o estandarizacion de algunos elementos, como <a>, <cite> 

0 <menu>. 

• MathML para formulas matematicas. 

• Almacenamiento local en el lado del cliente. 

• Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capftulos. 

1.1 ESPECIFICACION OFICIAL 

El organismo W3C elabora las normas a seguir para la creacion de las paginas HTML5. 

Sin embargo, no es necesario conocer todas estas especificaciones, escritas es un 
lenguaje bastante formal, para disenar paginas con este lenguaje. Las normas oficiales 
estan escritas en ingles y se pueden consultar de forma gratuita en las siguientes 
direcciones: 

• Especificacion recomendada como candidata para HTML5 

• Borrador para la especificacion oficial de HTML 5.1 
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1.2 5 TIPS 

1.2.1 HTML5 ES API 

Se puede pensar en HTML solo como nuevas etiquetas y geolocalizacion. Pero esta no es 
mas que una pequena parte del estandar que define HTML5. La especificacion de HTML5 
define tambien como esas etiquetas interactuan con J avaScript, a traves del Modelo de 
Objetos de Documento (DOM). HTML5 no es unicamente definir una etiqueta como 
<video> , tambien existe su correspondiente API para objetos de video en el DOM. Se 
puede utilizar esta API para detectar el soporte para diferentes formatos de video, 
reproducir el video, hacer una pausa, silenciar el audio, realizar un seguimiento de la 
cantidad de video que se ha descargado, y todo lo que necesita para crear una completa 
experiencia de usuario alrededor de la etiqueta en si. 

1.2.2 NO HAYQUETIRAR NADA A LA BASURA 

Se puede amar, o se puede odiar, pero no se puede negar que HTML 4 es el formato de 
marcado mas exitoso de la historia. HTML5 se basa en ese exito. No es necesario volver 
a aprender cosas que ya se conocen. Si la aplicacion web que funcionaba ayer en HTML 
4, hoy funcionara en HTML5. 

Ahora, si lo que se desea es mejorar las aplicaciones web, este es el lugar correcto. He 
aqui un ejempio concrete: HTML5 soporta todos los controles de formulario de HTML 4, 
pero tambien incluye nuevos controles de entrada. Algunos de estos son funcionalidades 
esperadas durante mucho tiempo, como reguladores y selectores de fecha, mientras que 
otros son mas sutiles. Por ejempio, el tipo de entrada de correo electronico se parece a 
un cuadro de texto, pero los navegadores moviles personalizar su teclado en pantalla 
para que sea mas facil de escribir direcciones de correo electronico. Los navegadores 
mas antiguos que no son compatibles con el tipo de entrada de correo electronico sera 
tratado como un campo de texto normal, y el formulario sigue funcionando sin ningun 
cambio en las etiquetas o hacks de J avaScript. 

1.2.3 FACIL de COMENZAR 

"Actualizar" a HTML5 puede ser tan simple como cambiar su tipo de documento. El tipo 
de documento debe estar en la primera linea de cada pagina HTML. Las versiones 
anteriores de HTML definen un monton de doctypes, y elegir el mas adecuado puede ser 
dificil. En HTML5, solo hay un tipo de documento: 

<!DOCTYPE html> 

La actualizacion al doctype HTML5 no rompe el marcado existente, ya que los elementos 
obsoletos previamente definidas en HTML 4 todavfa se representara en HTML5. Pero le 
permitira usar (y validar) nuevos elementos semanticos como <articie>, <section>, 

<header> y <footer>. 
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1.2.4 iYA FUNCIONA! 

Si se quiere dibujar en un lienzo, reproducir video, disenar mejores formas, o construir 
aplicaciones web que funcionan offline, nos encontramos con que HTML5 ya esta bien 
soportado. Firefox, Safari, Chrome, Opera y los navegadores moviles ya son compatibles 
con canvas, video, la geolocalizacion, el almacenamiento local, y mas funcionalidades. 
Incluso Microsoft (raramente conocido por el soporte de estandares) soporta la mayorfa 
de las caracteristicas de HTML5 en Internet Explorer 9. 

1.2.5 HA VENI DO PARA QUEDARSE 

Tim Berners-Lee invento la World Wide Web a principios de 1990. Mas tarde fundo el 
W3C para que actuase como administrador unico de los estandares web, lo que venido 
haciendo durante mas de 15 ahos. Esto es lo que el W3C tenia que decir sobre el future 
de los estandares web, en julio de 2009: 

Hoy, el director anuncia que cuando el XHTML 2 expire en la fecha prevista a finales 
de 2009, no sera renovado. De este mode, y mediante el aumento de los recursos 
en el Grupo de Trabajo de HTML, el W3C espera acelerar el progreso de HTML5 y 
aclarar la posicion del W3C sobre el future de HTML. 

En septiembre de 2012, el W3C propuso un plan para crear una primera especificacion de 
HTML5 a finales de 2014, y una nueva especificacion final de HTML 5.1 a finales 2016. Al 
igual que ocurre en la especificacion de CSS3, en HTML5 se ha optado por modularizar la 
especificacion, creando grupos de trabajo que trabajan de forma separada en diferentes 
aspectos del estandar. Algunas de las especificaciones sobre las que se esta trabajando: 

• HTML Microdata - HTML WG 

• HTML Canvas 2D Context - HTML WG 

• HTML5 Web Messaging - Web Apps WG 

• Web Workers - Web Apps WG 

• Web Storage - Web Apps WG 

• The WebSocket API - Web Apps WG 

• The WebSocket Protocol - IETF HyBi WG 

• Server-Sent Events - Web Apps WG 

• WebRTC - WebRTC WG 

• WebVTT - W3C Web Media Text Tracks CG 

INDICE DE CONTENIDOS 
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HTML5 


Anterior Siguiente 


CAPITULO 2 SEMANTICA 


Una de las novedades que hemos mencionado anteriormente son las etiquetas que se 
han introducido en HTML5. Existen mas de 30 nuevas etiquetas semanticas que pueden 
ser utilizadas en nuestras paginas estaticas. Estas nuevas etiquetas se podrian clasificar 
en dos grupos: 

• Etiquetas que extienden a las actuales, como <video>, <audio> 0 <canvas>, y que 
ademas anaden nuevas funcionalidades a los documentos HTML, que podemos 
controlar desde J avaScript y 

• etiquetas que componen la web semantica, es decir, que no proponen nuevas 
funcionalidades pero sirven para estructurar sitios web, y anadir un significado 
concrete, mas alia de las etiquetas generales como <div>. 

En este capitulo, veremos como transformar nuestra estructura actual de marcado 
basada en <div>, a una estructura que utilize las nuevas etiquetas estructurales como 

<nav>, <header>, <footer>, <aside>, 0 <article>. 


2.1 CABECERA DEL DOCUMENTO 

Ademas de las nuevas etiquetas introducidas por HTML5 (que veremos mas adelante), el 
nuevo estandar propone pequenas mejoras que podemos aplicar en la definicion de 
nuestros documentos, en concrete en la cabecera de los mismos. 

2.1.1 DOCTYPE 

El estandar XHTML derive de XML, por lo que comparte con el muchas de sus normas y 
sintaxis. Uno de los conceptos fundamentales de XML es la utilizacion del DTD o 
Document Type Definition ("Definicion del Tipo de Documento"). El estandar XHTML 
define el DTD que deben seguir las paginas y documentos XHTML. En este documento se 
definen las etiquetas que se pueden utilizer, los atributos de cada etiqueta y el tipo de 
valores que puede tener cada atributo. 

<!DOCTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://WWW.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


Esta es una de las 15 declaraciones posibles declaradas en los estandares HTML4 y 
XHTML. En HTML5 se reduce la definicion del tipo de documento a una unica posibilidad, 
por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto: 


http://www.arkaitzgarro.com/htnil5/capitulo-2.html[13/07/2015 11:58:55] 




Semantica I HTML5 


<!DOCTYPE html> 

2.1.2 ELEMENTO RAIZ HTML 

En todo documento HTML, su elemento rafz o nodo superior siempre es la etiqueta 
<htmi>. Hasta ahora, este elemento rafz se definfa de la siguiente manera: 

<html xmlns=http://www.w3.org/1999/xhtml 
lang="en" 
xml: lang= "en" > 


No hay ningun problema en mantener esta sintaxis. Si se desea, se puede conservar, ya 
que es valido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias, por 
lo que podemos eliminarlas. 

El primer elemento del que podemos prescindir es el atributo xmins. Se trata de una 
herencia de XHTML 1.0, que dice que los elementos de esta pagina estan en el espacio 
de nombres XHTML, http://www.w3.org/i999/xhtmi. Sin embargo, los elementos de 
HTML5 estan siempre en este espacio de nombres, por lo que ya no es necesario 
declararlo explfcitamente. Eliminar el atributo xmins nos deja con este elemento de la 
siguiente manera: 

<html lang="es" xml: lang="en"> 

En este caso ocurre lo mismo con el atributo xmiriang, es una herencia de XHTML que 
podemos eliminar, quedando finalmente la etiqueta de la siguiente manera: 

<html lang="en"> 


2.1.3 ELEMENTO HEAD 

El primer hijo del elemento rafz es generalmente el elemento head. El elemento head 
contiene los metadatos que aportan informacion extra sobre la pagina, como su tftulo, 
descripcion, autor, etc. Ademas, puede incluir referencias externas a contenidos 
necesarios para que el documento se muestre y comporte de manera correcta (como 
hojas de estilos o scripts). Este elemento ha sufrido pequehas variaciones, pero que 
debemos tener en cuenta: 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>My Weblog</title> 

<link rel="stylesheet" type="text/css" href ="style-original.css" /> 
<link rel="alternate" type="application/atom+xml" 

title="My Weblog feed" 
href ="/feed/" /> 

<link rel="search" type="application/opensearchdescription+xml" 
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title="My Weblog search" 
href="opensearch.xml" /> 

<link rel="shortcut icon" href ="/favicon.ico" /> 

</head> 

2.1.3.1 CODIFICACION DEL CONTENIDO 

Cuando se piensa en "texto", probablemente nos venga a la cabeza una definicion de 
"caracteres y sfnnbolos que veo en la pantalla de mi ordenador". Pero realmente se 
tratan de bits y bytes. Cada cadena de caracteres que se muestra en la pantalla, se 
almacena con una codificacion de caracteres en particular. Hay cientos de codificaciones 
de caracteres diferentes, algunos optimizado para ciertos idiomas como el ruso, el chino 
0 ingles, y otros que se pueden utilizer para multiples idiomas. En terminos generales, la 
codificacion de caracteres proporciona una correspondencia entre lo que se muestra en 
la pantalla y lo que un equipo realmente almacena en la memoria y en el disco. 

Se puede pensar en la codificacion de caracteres como una especie de clave de 
descifrado del texto. Cuando accedemos a una secuencia de bytes, y decidimos que es 
"texto", lo que necesitamos saber es que codificacion de caracteres se utiliza para que 
pueda decodificar los bytes en caracteres y mostrarlos (o transformarlos) de manera 
correcta. 

Lo ideal es establecer esta codificacion en el servidor, indicando el tipo en las cabeceras 
de respuesta: 


Content-Type: text/html; charset="utf-8" 

Por desgracia, no siempre podemos tener el control sobre la configuracion de un servidor 
HTTP. Por ejempio, en la plataforma Blogger, el contenido es proporcionado por 
personas, pero los servidores son administrados por Google, por lo que estamos 
supeditados a su configuracion. Aun asf, HTML 4 proporciona una manera de especificar 
la codificacion de caracteres en el documento HTML: 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

El encabezado HTTP es el metodo principal, y anula la etiqueta <meta> si esta presente. 
Pero no todo el mundo puede establecer encabezados HTTP, por lo que la etiqueta 
<meta> todavia tiene sentido. En el caso de HTML5, es aun mas sencillo definir esta 
etiqueta meta: 


<meta charset="utf-8"> 


Debemos acostumbrarnos a especificar la codificacion de nuestros documentos, aunque 
no vayamos a utilizar caracteres especiales o nuestro documentos no se presente en 
otros idiomas. Si no lo hacemos, podemos exponernos a problemas de seguridad. 
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2.1.3.2 LINKS 

Dentro del elemento head, las etiquetas <iink> son una manera de acceder o declarar 

contenido externo al documento actual, que puede cumplir distintos objetivos: 

• Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al 
presente documento. 

• Es un feed que contiene el mismo contenido que esta pagina, pero en un formato 
estandar (RSS). 

• Es una traduccion de esta pagina en otro idioma. 

• Es el mismo contenido que esta pagina, pero en formato PDF. 

• Es el proximo capftulo de un libro en Ifnea de la cual esta pagina es tambien una 
parte. 

En HTML5, se separan estas relaciones de enlace en dos categories: 

• Enlaces a recursos externos que se van a utilizer para mejorar el documento actual, 

• y enlaces de hipervinculos que son enlaces a otros documentos. 

El tipo de relacion mas utilizado (literalmente) es el siguiente: 


<link rel="stylesheet" href ="style-original.css" type= "text/css" /> 


Esta relacion es utilizada para indicar el archivo donde se almacenan las reglas CSS que 
se desean aplicar al documento. Una pequena optimizacion que se puede hacer en 
HTML5 es eliminar el atributo type. Solo hay un lenguaje de estilo para la web, CSS, asi 
que ese es el valor predeterminado para el atributo type: 


<link rel="stylesheet" href ="style-original.css" /> 

2.2 NUEVAS ETIQUETAS SEMANTICAS 

En 2004, Ian Hickson, el autor de la especificacion de HTML5, analizo 1.000.000.000 de 
paginas web utilizando el motor de Google, intentando identificar la manera en la que la 
web real estaba construida. Uno de los resultados de este analisis, fue la publicacion de 
una lista con los nombres de clases mas utilizados. Este estudio revela que los 
desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto 
llevo a considerar que quizas fuese una buena idea crear etiquetas concretas para 
reflejar estas estructuras. 

Este tipo de etiquetas que componen la web semantica nos sirven para que cualquier 
mecanismo automatico (un navegador, un motor de busqueda, un lector de feeds...) que 
lea un sitio web sepa con exactitud que partes de su contenido corresponden a cada una 
de las partes tfpicas de un sitio. Observando esas etiquetas semanticas estructurales. 
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cualquier sistema podra procesar la pagina y saber como esta estructurada. Veamos 
algunas de estas etiquetas que introduce HTML5 en este sentido. 

• <section></section> : se utlllza para representar una seccion "general" dentro de 
un documento o aplicacion, como un capftulo de un libro. Puede contener 
subsecciones y si lo acompanamos de hi-h6 podemos estructurar mejor toda la 
pagina creando jerarquias del contenido, algo muy favorable para el buen 
posicionamiento web. 

• <article></article> : representa un componente de una pagina que consiste en 
una composicion autonoma en un documento, pagina, aplicacion, o sitio web con la 
intencion de que pueda ser reutilizado y repetido. Podria utilizarse en los artfculos 
de los foros, una revista o el articulo de periodico, una entrada de un blog, un 
comentario escrito por un usuario, un widget interactive o cualquier otro articulo 
independiente de contenido. Cuando los elementos de <articie> son anidados, los 
elementos interiores representan los artfculos que en principio son relacionados con 
el contenido del artfculo externo. Por ejempio, un artfculo de un blog que permite 
comentarios de usuario, dichos comentarios se podrfan representar con <article>. 

• <aside></aside> : representa una seccion de la pagina que abarca un contenido 
relacionado con el contenido que lo rodea, por lo que se le puede considerar un 
contenido independiente. Este elemento puede utilizarse para efectos tipograficos, 
barras laterales, elementos publicitarios, para grupos de elementos de la 
navegacion, u otro contenido que se considere separado del contenido principal de 
la pagina. 

• <header></header> : representa un grupo de artfculos introductorios o de 
navegacion. Esta destinado a contener por lo general la cabecera de la seccion (un 
elemento hi-h6 o un elemento hgroup), pero no es necesario. 

• <nav></nav>: representa una seccion de una pagina que enlaza a otras paginas o a 
otras partes dentro de la pagina. No todos los grupos de enlaces en una pagina 
necesita estar en un elemento nav, solo las secciones que constan de bloques de 
navegacion principales son apropiados para el elemento de navegacion. 

• <footer></footer> : representa el pie de una seccion, con informacion acerca de la 
pagina/seccion que poco tiene que ver con el contenido de la pagina, como el autor, 
el copyright o el aho. 

• <hgroup></hgroup> : representa el encabezado de una seccion. El elemento se utlllza 
para agrupar un conjunto de elementos hi-h6 cuando el tftulo tiene varies niveles, 
tales como subtftulos o tftulos alternatives. 

• <time> : representa o bien una hora (en formate de 24 horas), o una fecha precisa 
en el calendario gregoriano (en formate ISO), opcionalmente con un tiempo y un 
desplazamiento de zona horaria. 
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2.3 ESTRUCTURA DE UN DOCUMENTO HTML5 

Como hemos visto con las nuevas etiquetas semanticas introducidas en HTML5, estas 
aportan un significado concreto al documento que estamos definiendo, y por lo tanto, 
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver 
como podemos convertir nuestra actual pagina con las nuevas etiquetas introducidas en 
HTML5. 

2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4 

El siguiente codigo muestra una estructura "clasica" de documento HTML, donde los 
diferentes contenidos de la web se encuentran agrupados por etiquetas <div>. Por si 
mismas, estas etiquetas no aportan ningun tipo de significado, y el atributo id tampoco 
se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever"> , el 
significado sigue siendo el mismo, ninguno. 


<div id="header"> 


<div id="nav"> 


<div id="article"> 


<div id="section"> 


<div id="aside"> 


<div id="footer"> 


<DOCTYPE html PUBLIC"-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http://WWW.w3.org/TR/xhtml1/DTD/xhtmil-transitional.dtd" > 
<html> 

<body> 

<div id="header"> 

<a href="/"><img src=logo.png alt="home"></a> 

<hl>My Weblog</hl> 

<p class="tagline"> 

A lot of effort went into making this effortless. 

</p> 

</div> 

<div id="nav"> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href= "#" >blog</a></li> 

<li><a href="#">gallery</a></li> 

<li><a href="#">about</a></li> 

</ul> 
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</div> 

<div class="articles "> 

<div class="article"> 

<p class="post-date">October 22, 2009</p> 

<h2> 

<a href="#" title="link to this post">Travel day</a> 
</h2> 

<div class="content "> 

Content goes here... 

</div> 

<div class="comments"> 

<p><a href="#">3 comments</a></p> 

</div> 

</div> 

</div> 

<div class="aside"> 

<div class="related"></div> 

<div class="related"></div> 

<div class="related"></div> 

</div> 

<div id="footer"> 

<p>&#167; </p> 

<p>&#169; 2013&#8211;9 <a href="#">Arkaitz Garro</a></p> 
</div> 

</body> 

</html> 


2.3.2 ESTRUCTURATRADICIONAL DE UN DOCUMENTO EN HTML5 

Veamos como podemos anadir un significado a este documento, unicamente aplicando 
las nuevas etiquetas semanticas incluidas en HTML5. 



<!DOCTYPE html> 
<html> 
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<body> 

<header> 

<a href = " / "ximg src=logo.png alt = "home "></a> 

<hgroup> 

<hl>Title</hl> 

<h2 class="tagline"> 

A lot of effort went into making this effortless. 

</h2> 

</hgroup> 

</header> 

<nav> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href="#">blog</a></li> 

<li><a href="#">gallery</a></li> 

<li><a href ="#">about</a></li> 

</ul> 

</nav> 

<section class="articles"> 

<article> 

<time datetime="2009-10-22">0ctober 22, 2009</time> 

<h2> 

<a href="#" title="link to this post">Travel day</a> 

</h2> 

<div class="content"> 

Content goes here... 

</div> 

<section class="comments"> 

<p><a href="#">3 comments</a></p> 

</section> 

</article> 

</section> 

<aside> 

<div class="related"></div> 

<div class="related"></div> 

<div class="related"></div> 

</aside> 

<footer> 

<p>&#167 ; </p> 

<p>&#169; 2013&#8211;9 <a href ="#">Arkaitz Garro</a></p> 

</footer> 

</body> 

</html> 

Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debennos 
utilizar. Esto no siempre es asi, y cuando estructuramos contenidos de mucho mayor 
alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar 
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en la correcta seleccion de etiquetas, es el que proponen en HTML5 Doctor. 



Doctor 


HTML5 Element Flowchart 

Sectioning content elements ond friends 

By @riddle & @boblet 
www.html5doctor.com 


A block of flow content 
(not inline phrasing content) 


Site or in-page 
navigation (anything 
you’d use a ’’skip to 
nav" link for) 

-» htmlSdoctor.com/nav 


Sidebar, comments 
section, pullquote, 
glossary, advertising, 
footnote etc that’s 
tangentially related to 
the page or content... 



News article, weblog or 
fomm post, comment 
on an article, sidebar 
widget etc, with a 
heading... 

-» html5doctor.com/article 


^ <figure> ^ 


One or more images, 
graphics, code samples 
etc, plus optional 
<figcaption>... 


( <section^ } 

( Appropriate ] 

V_ J 

V element / 


A section of the page, 
or chapter of an 
<article>, with a 
heading... 


Flow content with no 
additional semantics, 
e.g. for CSS hooks... 

-• html5doctor.com/div 


Probably <p>, but 
possibly <address>, 
<blockquote>, <pre>.. 

-* htmlSdoctor. com/semantics 


•Sectioning content element 

"nese foo*’ elements Cond their '>eod ngs) ce ^vSed by 
HTMLS's outlining olgcrithm to moke the oocument’s outline 
-• html5doctor.com/outline 


-» html5doctor.com/figure -• html5doctor.com/section 


20IJ 07-22 vl.S 
For more information: 
v/ww.htmlSdoctorcom/somantics 


2.4 USO DE LAS NUEVAS ETIQUETAS SEMANTICAS 

2.4.1 <HEADER> 

Segun la especificacion, un elemento <header> representa lo siguiente: 

Un grupo de navegacion o contenido introductorio. Un elemento header 
normalmente contiene una seccion de encabezado (un elemento hl-h6 o un 
elemento hgroup), pero puede contener otro tipo de elementos, como una tabla de 
contenidos, un formulario de busqueda o cualquier logo importante. 

En nuestro ejempio, y en la mayoria de los sitios web, la cabecera contiene los primeros 
elementos de la pagina. Tradicionalmente el titulo de la web, su logo, enlaces para 
volver al inicio... De la manera mas simple, nuestra cabecera quedaria de esta forma: 


<header> 

<a href="/"><img src=logo.png alt="home"></a> 
<hl>Title</hl> 

</header> 


Tambien es muy comun que los sitios web muestren un lema o subtftulo bajo el titulo 
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principal. Para dar mayor importancia a este subtitulo, y relacionarlo de alguna manera 
con el tftulo principal de la web, es posible agrupar los dos titulares bajo un elemento 

<hgroup>. 


<header> 

<a href =" / " ximg src = logo.png alt = "home"></a> 

<hgroup> 

<hl>Title</hl> 

<h2 class="tagline"> 

A lot of effort went into making this effortless. 
</h2> 

</hgroup> 

</header> 


2.4.2 <NAV> 

Segun la especificacion, un elemento <nav> representa lo siguiente: 

El elemento <nav> representa una seccion de una pagina que enlaza con otras 
paginas o partes de la misma pagina: una seccion con enlaces de navegacion. 

El elemento <nav> ha sido disehado para identificar la navegacion de un sitio web. La 
navegacion se define como un conjunto de enlaces que hacen referenda a las secciones 
de una pagina o un sitio, pero no todos los enlaces son candidatos de pertenecer a un 
elemento <nav>: una lista de enlaces a patrocinadores o los resultados de una 
busqueda, no forman parte de la navegacion principal, sino que corresponden con el 
contenido de la pagina. 

Como ocurre con los elementos <header>, <footer> y el resto de nuevas etiquetas, no 
estamos obligados a utilizar un unico elemento <nav> en toda la pagina. Es posible que 
tengamos una navegacion principal en la cabecera de la pagina, una tabla de contenidos 
0 enlaces en el pie de la pagina, que apuntan a contenidos secundarios. Todos ellos son 
candidatos a pertenecer a un elemento <nav>. 


<nav> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href ="# ">blog</a></li> 

<li><a href="#">gallery</a></li> 

<li><a href="#">about</a></li> 

</ul> 

</nav> 

2.4.3 <FOOTER> 

Segun la especificacion, un elemento <footer> representa lo siguiente: 
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Representa el pie de una seccion. Un pie tradicionalmente contiene informacion 
acerca de su seccion, como quien escribio el contenido, enlaces relacionados, 
copyright y similares. 

Al igual que ocurre con el elemento <nav>, podemos tener tantos elementos <footer> 
como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie 
principal, que contiene los avisos legales (privacidad, condiciones del servicio, 
copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que 
pueden ir incluidos en un elemento <nav>. 

2.4.4 <ARTICLE> 

Segun la especificacion, un elemento <article> representa lo siguiente: 

Este elemento representa un contenido completo, auto-contenido en un documento, 
pagina, aplicacion o sitio web, que es, en principio, independiente de ser distribuido 
y reutilizado, por ejempio en un RSS. Puede ser un post de un foro, un artfculo de 
un periodico o revista, una entrada de un blog, un comentario de un usuario, un 
widget o cualquier otro elemento independiente. 

Cuando los articulos estan anidados, los articulos interiores representan contenido 
que en principio esta relacionado con el artfculo que los contiene. Por ejempio, una 
entrada de un blog puede aceptar comentarios de usuarios, que estan incluidos 
dentro del contenido principal y relacionados con el mismo. 

Por lo tanto, la etiqueta <articie> se utiliza para encapsular contenido, que tiene 
significado en sf mismo, y que puede ser distribuido y reutilizado en otros formatos de 
datos. No nos referimos unicamente a contenidos clasicos de texto, sino que incluso un 
contenido multimedia con su transcripcion, un mapa o email pueden ser totalmente 
validos para ser incluidos en una etiqueta <article>. 


<section> 

<hl>Comments</hl> 

<article id="cl"> 

<footer> 

<p>Posted by: <span>George Washington</span></p> 

<p><time datetime="2009-10-10">15 minutes ago</time></p> 
</footer> 

<p>Yeah! Especially when talking about your lobbyist friends !</p> 
</article> 

<article id="c2"> 

<footer> 

<p>Posted by: <span itemprop="name">George Hammond</span></p> 
<p><time datetime="2009-10-10">5 minutes ago</time></p> 

</ footer> 

<p>Hey, you have the same first name as me.</p> 
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</ article> 
</section> 


2.4.5 <SECTION> 

A diferencia del elemento <article>, este elemento es utilizado para dividir el 
documento (o articulos) en diferentes areas, o como su propio nombre indica, en 
secciones. Segun la especificacion, un elemento <section> representa lo siguiente: 

Representa una seccion generica de un documento o aplicacion. Una seccion, en 
este contexto, es un grupo tematico de contenido, que generalmente incluye una 
cabecera. 

Consideremos el siguiente marcado valido en HTML 4: 


<hl>Rules for Munchkins</hl> 

<h2>Yellow Brick Road</h2> 

<p>It is vital that Dorothy follows it—so no selling 
bricks as "souvenirs" </p> 

<h2>Fan Club unif orms</h2> 

<p>All Munchkins are obliged to wear their "I'm a friend 
of Dorothy!" t-shirt when representing the club</p> 
<p><strong>Vital caveat about the information above: 

does not apply on the first Thursday of the month. </strong></p> 


En este caso, y desde un punto de vista semantico, es complicado deducir si el texto Vital 
caveat about the information above: does not apply on the first Thursday of the month, 
pertenece al contenido completo o esta relacionado con la seccion Fan Club uniforms. 
Gracias a la etiqueta <section>, es muy sencillo separar e identificar a que seccion 
pertenece cada contenido: 


<article> 

<hl>Rules for Munchkins</hl> 

<section> 

<h2>Yellow Brick Road</h2> 

<p>It is vital that Dorothy follows it—so no selling 
bricks as "souvenirs" </p> 

</ section> 

<section> 

<h2>Fan Club unif orms</h2> 

<p>All Munchkins are obliged to wear their "I'm a friend 
of Dorothy!" t-shirt when representing the club</p> 

</ section> 

<p><strong>Vital caveat about the information above: 

does not apply on the first Thursday of the month. </strong></p> 
</article> 
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<article> 

<hl>Rules for Munchkins</hl> 

<section> 

<h2>Yellow Brick Road</h2> 

<p>It is vital that Dorothy follows it—so no selling 
bricks as "souvenirs" </p> 

</section> 

<section> 

<h2>Fan Club unif orms</h2> 

<p>All Munchkins are obliged to wear their "I'm a friend 
of Dorothy!" t-shirt when representing the club</p> 
<p><strong>Vital caveat about the information above: 

does not apply on the first Thursday of the month. </strong></p> 
</section> 

</article> 


Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar 
contenido que pertenece a una misma seccion, permitiendo incluirlo dentro de un 
contexto semantico. 

Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento 
en secciones, que incluyen contenido de tematicas diferentes entre si. Si ademas 
queremos separar estos contenidos visualmente en dos columnas, lo logico seria utilizar 
las tradicionales etiquetas <div> para agrupar los articulos segun su tematica, y 
posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pestanas. 

En este caso, la etiqueta <div> no nos aporta ningun significado semantico, tan solo 
estructural. La etiqueta <section> es la encargada de anadir semantica en estos casos: 


<section> 

<hl>Articles about llamas</hl> 

<article> 

<h2>The daily llama: Buddhism and South American camelids</h2> 
<p>blah blah</p> 

</article> 

<article> 

<h2>Shh! Do not alarm a llama</h2> 

<p>blah blah</p> 

</ article> 

</section> 

<section> 

<hl>Articles about root vegetables</hl> 

<article> 

<h2>Carrots: the orange miracle</h2> 

<p>blah blah</p> 

</ article> 
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<article> 

<h2>Eat more Swedes (the vegetables, not the people) </h2> 
<p>blah blah</p> 

</article> 

</section> 


2.4.6 <ASIDE> 

Segun la especificacion, un elemento <aside> representa lo siguiente: 

Una seccion de una pagina que consiste en contenido tangencialmente relacionado 
con el contenido alrededor del elemento, y puede considerarse separado de este 
contenido. Estas secciones son normalmente representadas como elementos 
laterales en medios impresos. Este elemento puede utilizarse contener citas, 
anuncios, grupos de elementos de navegacion y cualquier otro contenido separado 
del contenido principal de la pagina. 

Dentro de un articulo, por ejempio, puede ser utilizado para mostrar contenido 
relacionado como citas u otros artfculos relacionados. 

2.4.7 <FIGURE> 

Segun la especificacion, un elemento <figure> representa lo siguiente: 

The figure element represents some flow content, optionally with a caption, that is 
self-contained and is typically referenced as a single unit from the main flow of the 
document. 

The element can be used to annotate illustrations, diagrams, photos, code listings, 
etc. This includes, but is not restricted to, content referred to from the main part of 
the document, but that could, without affecting the flow of the document, be 
moved away from that primary content, e.g. to the side of the page, to dedicated 
pages, or to an appendix. 

Hasta ahora, no habia una manera correcta de poder ahadir un subtftulo o una leyenda a 
un contenido concreto, como explicar una figura o atribuir una imagen a un fotografo. 
Gracias a la etiqueta <figure> podemos contener una imagen (o un video, ilustracion o 
bloque de codigo) en un elemento y relacionarlo con un contenido concreto: 


<f igure> 

<img src="welcome.jpg" alt= "Alternative text"> 
<f igcaption> 

Bruce and Remy welcome questions 

<small>Photo &copy; Bruce's mum</small> 
</f igcaption> 

</figure> 
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En conveniente recordar que el atributo ait indica el texto a mostrar cuando la imagen 
no esta disponible, y no esta pensada para contener una descripcion de la imagen, y 
mucho menos para duplicar lo ya indicado en la etiqueta <figcaption>. 

Ejercicio 1 

Ver enunciado 

2.5 ATRIBUTOS GLOBALES 

HTML5 tambien incluye nuevos atributos globales que pueden ser asignados a cualquier 
elemento. Son los siguientes: 

2.5.1 ACCESSKEY 

El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que 
permite activar un elemento a asignarle el foco. Este atributo ya existia en HTML 4, 
aunque ha sido utilizado en muy pocas ocasiones. Como HTML5 esta pensado para 
aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no 
ha sido eliminado, y ahora esta disponible para cualquier elemento. 

Para evitar conflictos con otros atajos de teclado, o con los propios del navegador, ahora 
esta etiqueta permite asignar alternativas en este atributo. Un ejempio incluido en la 
especificacion: 


<input type="search" name="q" accesskey="s 0"> 

Esto quiere decir que este elemento es accesible a traves de dos atajos de teclado, a 
traves de la tecia s o a traves de la tecia o (en ese orden). 

2.5.2 CONTENTEDITABLE 

Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta 
contenteditable eS ahora parte de la especificacion oficial. 

La introduccion de esta etiqueta significa principalmente dos cosas: 

• Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta 
etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar 
una marca que indique la posicion actual del cursor. 

• Y segundo, es posible cambiar el formato del texto del contenido, ahadiendo 

negritas, cambiar la fuente, ahadir listas, etc. 

Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder 
desde J avaScript a este atributo, hay que tener en cuenta su notacion lowerCamelCase, 
siendo el nombre de la propiedad del DOM contentEditable . Ademas, existe otra 
propiedad llamada isContentEditable , que indica si el elemento es editable o no. 
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Finalmente, el contenido que ha side seleccionado por el usuario, puede ser objeto de 
modificaciones, como hemos comentado antes. A traves del comando 
element.execCommand () es posible indicar el tipo de modificacion (poner en negrita, 
copiar, cambiar la fuente...), siempre que el documento se haya indicado como editable. 

document.designMode = 'on'; 

Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al 
servidor. No existe ningun API o metodo en JavaScript que nos posibilite esta accion, por 
lo que debemos utilizer algun tipo de tecnologia tipo AJAX. 

2.5.3 DATA-* (CUSTOM DATA ATTRI BUTES) 

HTML5 permite crear atributos personalizados para los elementos. Estos atributos son 
utilizados para pasar informacion a JavaScript. Como veremos en el capftulo 
correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera 
almacenar informacion asociada con elementos, pero esto cambia radicalmente con 
estos atributos. 


<ul id=" vegetable-seeds" > 

<11 data-spacing=" 10cm" data-sowing-time="March to June">Carrots</li> 

<11 data-spacing=" 30cm" data-sowing-time="February to March">Celery</li> 
<11 data-spacing="3cm" data-sowing-time="March to September" >Radishes</li> 
</ul> 

2.5.4 DRAGGABLE 

Este atributo indica que el elemento indicado puede ser arrestable. Lo veremos en el 
capftulo correspondiente. 

INDICE DE CONTENIDOS 
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2.1 Cabecera del documento 
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2.4 Uso de las nuevas etiquetas semanticas 

2.5 Atributos globales 
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HTML5 


Anterior Siguiente 


CAPITULO 3 ELEMENTOS DE FORMULARIO 

HTML5 hace que el desarrollo de formularios sea mucho mas sencillo. Se han anadido dos 
nuevos metodos que pueden ser utilizados en la accion del formulario (update y 
delete ), pero lo mas interesante son los nuevos tipos de input y elementos de 
formulario que mejoran la experiencia del usuario y facilitan el desarrollo de los 
formularios. Estos nuevos elementos anaden en algunos casos, validaciones propias de 
sus datos, por lo que ya no es necesario J avaScript para realizar este proceso. 

3.1 NUEVOS TIPOS DE INPUT 

La especificacion de HTML5 define 12 nuevos tipos de input que podemos utilizer en 
nuestros formularios. Esta especificacion no define como deben mostrarse los nuevos 
tipos en los navegadores, ni los campos ni las validaciones. De hecho, y grades a como 
esta especificado HTML, los navegadores que no comprendan los nuevos tipos de 
entrada, mostraran un campo de texto tradicional, por lo que la compatibilidad con 
navegadores antiguos esta garantizada. 

3.1.1 Tl PO EMAIL 

El nuevo tipo <input type="emaii"> indlca al navegador que no debe permitir que se 
envie el formulario si el usuario no ha introducido una direccion de email valida, pero no 
comprueba si la direccion existe o no, solo si el formato es valido. Como ocurre con el 
resto de campos de entrada, puede enviar este campo vacio a menos que se indique que 
es obligatorio. 

El atributo multiple indlca que el valor de este campo, puede ser una lista de emails 
validos, separados por comas. 
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^ Submit ^ 




Figura 3.1 Campo de tipo email en un dispositive iOS 

3.1.2 TIPO URL 

El nuevo tipo <input tYpe="uri"> indica al navegador que no debe permitir que se envfe 
el formulario si el usuario no ha introducido una URL correcta. Algunos navegadores 
ofrecen ayudas al usuario, como Opera que ahade el prefijo http:// a la URL si el 
usuario no lo ha introducido. Una URL no tiene que ser necesariamente una direccion 
web, sino que es posible utilizer cualquier formato de URI valido, como por ejempio 

tel:555123456. 
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^ Submit ^ 




Figura 3.2 Campo de tipo uri en un dispositive iOS 

3.1.3 Tl PO DATE 

El nuevo tipo <input tYpe="date"> es de los mas esperados y utiles. En muchos de los 
sitios web es normal disponer de campos especfficos de fecha, donde el usuario debe 
especificar fechas (para un concierto, vuelo, reserva de hotel, etc). Al existir tantos 
formatos de fecha diferentes (DD-MM-YYYY o MM-DD-YYYY o YYYY-MM-DD), esto puede 
suponer un inconveniente para los desarrolladores o los propios usuarios. 

Este nuevo tipo de campo resuelve estos problemas, ya que es el navegador el que 
proporciona la interfaz de usuario para el calendario, e independientemente del formato 
en el que se muestre, los dates que se envian al servidor cumplen la norma ISO para el 
formato de fechas. 
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Date: ( May 14 , 2013 ( Submit ) 



Figura 3.3 Campo de tipo date en un dispositive iOS 

3.1.4 Tl PO TIME 

El nuevo tipo <input tYpe="time"> periTiite introducir una hora en fornnato 24h, y 
validarlo. De nuevo, es el navegador el encargado de mostrar la interfaz de usuario 
correspondiente: puede ser un simple campo donde es posible introducir la hora y los 
minutes, 0 mostrar algo mas complejo como un reloj de agujas. 
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Time: [ 10:37 AMplj ( Submit ) 



Figura 3.4 Campo de tipo time en un dispositive iOS 

3.1.5 TIPO DATETIME 

Este nuevo tipo de campo es la combinacion de los tipos date y time, por lo que se 
valida tanto la fecha como la bora introducida. 
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May 14. 2013, 10:37 ( Submit ) 




Mon May 13 

9 

36 

'^1 


ilU 

•J J 


■ 1 uucjy ! 

O/ 

Alvl H 

1 Wed May 15 
I-vfres-Mau Ifii 

11 

il? 1 

38 

l39^ 

PM J 


Figura 3.5 Campo de tipo datetime en un dispositive iOS 

3.1.6 Tl PO MONTH 

El nuevo tipo <i nput tYpe="month "> permite la seleccion de un mes en concrete. La 
representacion interna del mes es un valor entre 1 y 12, pero de nuevo queda en manos 
del navegador la manera de mostrarlo al usuario, utilizando los nombres de los meses 
por ejemplo. 
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onth: 


May 2013 


Q Submit ^ 



Figura 3.6 Campo de tipo month en un dispositive iOS 

3.1.7 Tl PO WEEK 

El nuevo tipo <input tYpe="week"> permite la seleccion de una semana del ano concreta. 
La representacion interna del mes es un valor entre 1 y 53, pero de nuevo queda en 
manos del navegador la manera de mostrarlo al usuario. La representacion interna de la 
semana 7, por ejempio, es la siguiente: 20 i 3 -w 07 . 
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Q] Nuevos tipos de input 


0 0 0 

^ “ C D www.arkait2garr0.com 




Week: 


r 


Semana 

- : ▼ 

Enviar 




i 

mayo de 2013 '»■ 




Semana 

lun 

mar 

mie 

jue 

vie 

sab 

dom 

18 

29 

30 

1 

2 

3 

4 

5 

19 

6 

7 

8 

9 

10 

11 

12 

20 

13 

14 

15 

16 

17 

18 

19 

21 

20 

21 

22 

23 

24 

25 

26 

22 

27 

28 

29 

30 

31 

1 

2 

23 

3 

4 

5 

6 

7 

8 

9 


Esta semana 


Eliminar 


Figura 3.7 Campo de tipo week en Google Chrome 

3.1.8 Tl PO NUMBER 

Como es de esperar, el nuevo tipo <input type="number "> valida la entrada de un tipo 
de dato numerico. Este tipo de campo encaja perfectamente con los atributos min, max 
y step, que veremos mas adelante. 



^ Submit ^ 
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Figura 3.8 Campo de tipo number en un dispositive iOS 

3.1.9 Tl PO RANGE 

El nuevo tipo <input type="range"> , iTiuestra un control deslizante en el navegador. 
Para conseguir un elemento de este estilo, era necesario un gran esfuerzo para 
combinar imagenes, funcionalidad y accesibilidad, siendo ahora mucho mas sencillo. 
Este tipo de campo encaja de nuevo perfectamente con los atributos min, max y step, 
que veremos mas adelante. 

© O O Q] Nuevos tipos de input x _ * 

ir G D vwvw.arkaitzgarro.com S 

Range: ' ' Enviar 


Figura 3.9 Campo de tipo range en Google Chrome 

3.1.10 TIPO TEL 

El nuevo tipo <input type="tei">, espera que se proporcione un numero de telefono. No 
se realize ninguna validacion, ni se oblige a que unicamente se proporcionen caracteres 
numericos, ya que un numero de telefono puede representarse de muchas maneras: 

+44 (0) 208 123 1234. 

La gran ventaja de este campo es que en dispositivos con un teclado virtual, este se 
adaptara para mostrar unicamente los caracteres asociados on numeros de telefono. 
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Submit ^ 



Previous Next Done 

1 

2 

ABC 

3 

DEF 

4 

GHI 

5 

JKL 

6 

MNO 

7 

POPS 

8 

TUV 

9 

WXYZ 

+ *# 

0 



Figura 3.10 Campo de tipo tei en un dispositive iOS 


3.1.11 Tl PO SEARCH 

El nuevo tipo <input tYpe="search"> , espera que se proporcione un ternnino de 
busqueda. La diferencia con un campo de texto normal, es unicamente estetica, aunque 
puede ofrecer alguna funcionalidad extra como un historico de ultimos terminos 
introducidos o una ayuda para el borrado. Por norma general, toma el aspecto de un 
campo de busqueda del navegador o sistema operative. 

® O ^ Nuevos tipos de input x _ * 

4“ ■ G D www.arkait 2 garro.com S 

Search! htmIS Enviar 
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Figura 3.11 Campo de tipo search en Google Chrome 


3.1.12 Tl PO COLOR 

El nuevo tipo <input type="coior"> , permlte seleccionar un color de una paleta de 
colores mostrada por el navegador. Esta paleta de colores, coincide, por norma general, 
con la interfaz de seleccion de colores del sistema operative. 


e Q Q j 

<- e 


Q Nuevos tipos de input x 
Q www.arkaitzgarro.com 



Color. 


Enviar 



Figura 3.12 Campo de tipo color en Google Chrome 

3.2 NUEVOS ATRIBUTOS 

Al igual que los nuevos tipos de campo, el elemento input ha recibido nuevos atributos 
para definir su comportamiento y restricciones: autocomplete, min, max, multiple, 
pattern, autofocus, placeholder, required y step. Exlste ademaS Un nuevO atrlbutO, 

list, que hace referenda a otro elemento, permitiendo crear un nuevo tipo de entrada 
de datos. 

3.2.1 ATRIBUTO list Y <datalist> 

La combinacion del atributo list y un elemento de tipo <dataiist> da como resultado 
un campo de texto, donde el usuario puede introducir cualquier contenido, y las 
opciones definidas en el <dataiist> se muestran como una lista desplegable. Hay que 
tener en cuenta que la lista tiene que estar contenida en un elemento <dataiist> cuyo 
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id coincide con el indicado en el atributo list: 

<input id="form-person-title" type="text" list= "mylist" > 
<datalist id="mylist"> 

<option label="Mr" value="Mr"> 

<option label="Ms" value="Ms"> 

<option label="Prof" value="Mad Professor"> 
</datalist> 


En este ejemplo se utiliza un campo de tipo text, pero puede ser utilizado igualmente 
con campos de tipo url y email. 


0 O O 12] 


Nuevo elemento datalist 



7 ) 




G D www.arkait2garr0.com 


r~] Surf Qj Dev Qj Scrum Qj Mobile » CJ Otros marcadores 


M Enviar 

Mr 

Ms 

Mad Professor Prof 


Figura 3.13 Nuevo elemento datalist, asociado a un campo de texto 

3.2.2 ATRIBUTO AUTOFOCUS 

El atributo booleano autofocus permite definir que control va a tener el foco cuando la 
pagina se haya cargado. Hasta ahora, esto se consegufa a traves de JavaScript, 
utilizando el metodo . focus o en un elemento concreto, al cargarse el documento. 
Ahora es el navegador el encargado de esta tarea, y puede comportarse de manera mas 
inteligente, como no cambiando el foco de un elemento si el usuario ya se encuentra 
escribiendo en otro campo (este era un problema comun con JavaScript). 

Unicamente debe existir un elemento con este atributo definido en el documento. Desde 
el punto de vista de la usabilidad, hay que utilizer este atributo con cuidado. Hay que 
utilizarlo unicamente cuando el control que recibe el foco es el elemento principal de la 
pagina, como en un buscador, por ejemplo. 

3.2.3 ATRIBUTO placeholder 

Una pequeha mejora en la usabilidad de los formularies, suele ser colocar un pequeho 
texto de ayuda en algunos campos, de manera discreta y que desaparece cuando el 
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usuario introduce algun dato. Como con el resto de elementos, hasta ahora era 
necesario utilizar J avaScript para realizar esta tarea, pero el atributo placeholder 
resuelve esta tarea. 

Es importante recordar que este atributo no sustituye a la etiqueta <iabei>. 

0 O O Atributo placeholder x _ * 

^ ^ C D wvvw.arkait 2 garr 0 .com S 

r~l Surf Dev Q Scrum Q Mobile » Qj Otros marcadores 

Search^ Envlar 


Figura 3.14 Atributo placeholder en un campo de busqueda 

3.2.4 ATRIBUTO required 

Este atributo puede ser utilizado en un <textarea> y en la gran mayorfa de los 
elementos <input> (excepto en los de tipo hidden, image 0 botones como submit). 
Cuando este atributo esta presente, el navegador no permite el envfo del formulario si el 
campo en concrete esta vacio. 

000 [ 2 ] Atributo required x _ “ 

^ G D WWW.arkait2garr0.com S 

r~l Surf Q Dev Scrum Q Mobile » Q Otros marcadores 

Name: | Enviar 

B Completa este campo 


Figura 3.15 Atributo required en un campo de texto 
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3.2.5 ATRIBUTO multiple 

Este atributo permite definir que un campo puede admitir varies valores, como URLs o 
emails. Un uso muy interesante de este atributo es utilizarlo en conjunto con el campo 
<input type="fiie">, ya que de esta manera nos permite seleccionar varies ficheros 
que podemos enviar al servidor al mismo tiempo. 


<input type="file" multiple="multiple"> 

3.2.6 ATRIBUTO autocomplete 

Algunos navegadores suelen incluir alguna funcionalidad de autocompletado en algunos 
campos de formulario. A pesar de haber side introducido recientemente en el estandar 
de HTML5, es una caracteristica que lleva mucho tiempo siendo utilizada, concretamente 
desde la version 5 de Internet Explorer. 

Este atributo permite controlar el comportamiento del autocompletado en los campos de 
texto del formulario (que por defecto esta activado). 

3.2.7 ATRIBUTOS min Y max 

Como hemos visto en el campo <input type="number"> , estos atributos restringen los 
valores que pueden ser introducidos; no es posible enviar el formulario con un valor 
menor que min o un valor mayor que max. Tambien es posible utilizarlo en otro tipo de 
campos como date, para especificar fechas mfnimas o maximas. 


<input type="date" min="2010-01-01" max="2010-12-31"> 


0 o o 

<- c 


Q] Atributos min y max x 

Q www.arkait 2 garro.com 


^ Surf Dev Cj Scrum ^ Mobile » Otros marcadores 


Name: ll| t Enviar 

B El valor debe inferior o igual a 10 


Figura 3.16 Atributos min y max en un campo numerico 

3.2.8 ATRIBUTO STEP 
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El atributo step controla los pasos por los que un campo aumenta o disminuye su valor. 
Si un usuario quiere introducir un porcentaje, pero queremos que sea en multiplos de 5, 
lo harfamos de la siguiente manera: 

<input type="range" mix="0" max="100" step="5"> 

3.2.9 ATRIBUTO pattern 

Algunos de los tipos de input que hemos visto anteriormente ( email, number, url...), 
son realmente expresiones regulares que el navegador evalua cuando se introducen 
datos. El atributo pattern nos permite definir una expresion regular que el valor del 
campo debe cumplir. Por ejempio, si el usuario debe introducir un numero seguido de 
tres letras mayusculas, podriamos definir esta expresion regular: 

<input pattern=" [0-9] [A-Z]{3}" name="part" 

title="A part number is a digit followed by three uppercase letters. "> 

La especificacion indica que la sintaxis de la expresion regular que utilicemos debe 
coincidir con la utilizada en J avaScript. 

3.2.10 ATRIBUTO FORM 

Tradicionalmente, los campos de un formulario van incluidos dentro de la 
correspondiente etiqueta <form> . Si por la razon que fuese (principalmente diseno) un 
elemento tuviese que mostrarse apartado del resto de elementos del formulario, se 
hacfa casi necesario incluir toda la pagina dentro de una etiqueta <form>. 

Con HTML5, los elementos que hasta ahora era obligatorio que estuviesen contenidos 
dentro del elemento <form>, pueden colocarse en cualquier lugar de la pagina, siempre 
que los relacionemos con el formulario concreto a traves del atributo form y el id de 
dicho formulario. 

<form id="foo"> 

<input type="text"> 


</form> 

<textarea form=" foo"></textarea> 


En este caso, el elemento <textarea> se encuentra fuera del formulario, pero realmente 
pertenece a el ya que hemos definido el atributo form con el identificador del formulario. 

3.3 NUEVOS ELEMENTOS 

Ademas de los nuevos tipos de input incluidos en la especificacion, se han ahadido 
nuevos elementos de formulario, entre los que se incluyen los siguientes: 
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3.3.1 <PROGRESS> 

El elemento <progress> es utilizado para representar un avance o progreso en la 
ejecucion de una tarea, como puede ser la descarga de un fichero o la ejecucion de una 
tarea compleja. Define los siguientes atributos: 

• max: define el trabajo total a realizar por la tarea, la duracion de un video... Su 
valor por defecto es i. o. 

• value: el valor actual (en coma flotante) o estado del progreso. Su valor debe ser 
mayor o igual a o.o y menor o igual a i.o o el valor especificado en max. 

• position: atributo de solo lectura que representa la posicion actual del elemento 

<progress>. Este valor es igual a value/max y -1 si no se puede determiner la 
posicion. 

Las unidades son arbitrarias, y no se especifican. 

<progress value="5" max="20">5</progress> 


©00 


J Q Nuevo elemento progress x 


^ G [ D www.arkait 2 garr 0 .com 
^ Surf pH Dev pH B Mobile 


» Otros marcadores 


:] 


Figura 3.17 Nuevo elemento progress 

3.3.2 <METER> 

El elemento <meter> eS muy similar a <progress> (de hecho, se discute la necesidad de 
disponer de dos elementos tan similares). Esta nueva etiqueta se usa para representar 
escalas de medidas conocidas, como la longitud, masa, peso, uso de disco, entre otras. 
Define los siguientes atributos: 

• value: representa el valor actual. Si no se especifica, se toma como valor el primer 
numero que aparece en el contenido del elemento. Su valor por defecto es 0 . 

• min: el mfnimo valor permitido. El valor por defecto es 0 . 
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• max: el mayor valor permitido. Si no se especifica, su valor por defecto es i, a 
menos que el valor mmimo definido sea mayor que i, en cuyo caso el valor de max 
sera igual a min. 

• low: es considerado el limite inferior del rango de valores. 

• max: es considerado el limite superior del rango de valores. 

• optimum: representa el valor optimo del elemento, y se encuentra entre min y max. 

<p>Your score is: 

<meter value="91" min="0" max="100" 

low="40" high="90" optimum="100">A+</meter> 

</p> 


0 O O 1^ Nuevo elemento meter x 
G D WWW.arkait2garr0.com 
U Surf Dev Q] Scrum Qj Mobile 

Your score is: * 


» [n Otros marcadores 


Figura 3.18 Nuevo elemento meter 
Ejercicio 2 
Ver enunciado 

INDICE DE CONTENIDOS 

Elementos de formulario 

3.1 Nuevos tipos de input 

3.2 Nuevos atributos 

3.3 Nuevos elementos 


http://www.arkaitzgarro.com/htnil5/capitulo-3.html[13/07/2015 11:59:21] 






Elementos de formulario I HTML5 


http://www.arkaitzgarro.com/htnil5/capitulo-3.html[13/07/2015 11:59:21] 



Que es Modernizr I HTML5 


HTML5 


Anterior Siguiente 


CAPITULO 4 QUE ES MODERNIZR 


Modernizr es una librerfa J avaScript que nos permite conocer la compatibilidad del 
navegador con tecnologias HTML5 y CSS3, lo que nos permitira desarrollar sitios web 
que se adapten a las capacidades cada navegador. 

Este framework es un paquete de deteccion de las capacidades de un navegador relativas 
a HTML5 y CSS3, esto es, una librerfa JavaScript que nos informara cuales de las 
funcionalidades de estas tecnologfas estan disponibles en el navegador del usuario, para 
utilizarlas, o no, en cada caso. 

Sabiendo que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5, 
podremos utilizarlas con libertad. De modo contrario, si sabemos que un navegador no 
es compatible con determinada funcionalidad, podremos implementar variantes que sf 
soporte y asf crear sitios web que se adaptan perfectamente al cliente web de cada 
visitante. 

Existen dos herramientas principales en Modernizr que se pueden utilizer para detectar 
las funcionalidades que estan presentes en un navegador. Una la podemos utilizer a 
traves de JavaScript y otra directamente sobre codigo CSS. En resumen, con Modernizr 
podemos detectar las funcionalidades disponibles de CSS3 y HTML5. 

4.1 ANADI R MODERNIZR A UNA PAGI NA 

El primer paso consistira en descargar el archive con el codigo fuente de Modernizr. Se 
trata de un archive con codigo J avaScript que podemos encontrar en dos variantes: 

• Development: contiene el codigo fuente complete, sin comprimir y con 
comentarios. Debemos utilizar esta variante unicamente en desarrollo o cuando 
queremos acceder a su codigo, para comprenderlo o ampliarlo. 

• Production: es recomendable (o mas bien obligatorio) utilizar esta variante cuando 
pasamos a un entornos de produccion. Al descargarnos Modernizr, tenemos la 
posibilidad de generar una librerfa unicamente con las funcionalidades que 
queremos detectar, lo que nos permitira ahorrarnos una importante cantidad de kb 
innecesarios. 

Una vez que hemos descargado nuestra librerfa, debemos incluirla en el codigo HTML de 
la pagina, de la misma manera que incluimos scripts J avaScript. 


< script src="/js/lib/vendor/modernizr-custom.min.js"></script> 


http://www.arkaitzgarro.com/htnil5/capitulo-4.html[13/07/2015 11:59:48] 




Que es Modernizr I HTML5 


Segun podemos leer en la documentacion de Modernizr, se aconseja colocar el 
script dentro del HEAD, porque debe cargarse antes del BODY de la pagina, debido 
a un componente que quizas utilicemos, para permitir HTML5 en Internet Explorer, 
llamado HTML5 Shiv. Ademas, se recomienda colocarlo despues de los estilos CSS 
para evitar un comportamiento poco deseable llamado FOUC, por el cual puede 
mostrarse, por un pequeho espacio de tiempo, la pagina sin los estilos CSS 
aplicados. 

A partir de este momento tendremos disponibles nuestros scripts de deteccion de 
funcionalidades asf como una serie de clases CSS que nos ayudaran a aplicar estilos solo 
cuando los navegadores los soporten. 

4.2 OBJETO MODERNIZR 

Cuando tenemos Modernizr cargado en nuestra pagina, se crea automaticamente un 
objeto J avaScript que tiene una serie de propiedades que nos indican si estan o no 
disponibles cada una de las funcionalidades presentes en CSS3 y HTML5. Las 
mencionadas propiedades contienen simplemente valores booleanos (true o false) que 
podemos consultar para saber si estan o no disponibles las funcionalidades que 
deseamos utilizar. 

El uso es tan sencillo como se indica a continuacion: 


if (Modernizr.boxshadow) { 

// Podemos aplicar sombras! 

} else { 

// La propiedad box-shadow no esta disponible 

} 


Aquf estamos consultando la propiedad boxshadow del objeto Modernizr. Esta propiedad 
nos indica si el navegador es compatible con el atributo box-shadow de CSS3, que sirve 
para crear cajas de contenido con sombreado. 

Ahora veamos otro ejempio similar que detectaria si esta disponible el elemento canvas 
del HTML5. 

if (Modernizr.canvas) { 

// Podemos utilizar canvas! 

} else { 

//El elemento canvas no esta disponible 

} 


Este es un simple ejempio que comprueba si estan disponibles ciertas propiedades y 
funcionalidades de CSS3 y HTML5. Logicamente, tendremos que desarrollar las 
funcionalidades que correspondan en cada caso. El listado complete de propiedades del 
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objeto para la deteccion de funcionalidades HTML5 y CSS3 se puede encontrar en la 
propia documentacion de Modernizr. 

4.3 CLASES CSS EN MODERNIZR 

Cuando tenemos Modernizr cargado en nuestra pagina, este crea automaticamente una 
serie de clases que asigna al elemento htmi del documento. Cada una de estas clases 
hace referenda a las caracteristicas que soporta el navegador, permitiendo desde CSS 
adaptar la interfaz segun las funcionalidades. Un ejempio de las clases que crea en un 
navegador de escritorio moderno: 

<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation 
postmessage websqldatabase indexeddb hashchange history draganddrop websockets 
rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textsh 
adow opacity cssanimations csscolumns cssgradients cssreflections csstransforms 
csstransformsBd csstransitions fontface generatedcontent video audio localstor 
age sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" 
> 

<head> 


< script src="/js/lib/vendor/modernizr-custom.min.js"></ script> 

</head> 

<body> 

<div class="elemento"></div> 

</body> 

</html> 

Todo el proceso es automatico y la creacion de cada una de esas clases se realizara 
unicamente en caso de que el navegador sea compatible con cada una de las 
caracteristicas de CSS3 y HTML5. 

La manera de utilizer estas clases es muy sencilla. Pensemos en que queremos aplicar 
sombra a un elemento con CSS3 en los navegadores que lo permitan y emular ese 
sombreado por medio de estilos CSS clasicos en los navegadores que no soporten el 
atributo box-shadow . Lo unico que tenemos que hacer es aplicar los estilos clasicos al 
elemento que deseemos: 


. elemento{ 

border-left: Ipx solid #ccc; 
border-top: ipx solid #ccc; 
border-bottom: Ipx solid #666; 
border-right: Ipx solid #666; 


Posteriormente, si nuestro navegador es compatible con el atributo box-shadow de CSS3, 
Modernizr habra incluido la clase "boxshadow" en el elemento htmi. Nosotros podemos 
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utilizar dicha clase CSS para aplicar estilos que sabemos que solo acabaran afectando a 
los navegadores que soporten el atributo box-shadow. 


■boxshadow .elemento{ 

border: Ipx solid #ccc; 
box-shadow: #999 3px 3px 3px; 

} 


Como se puede ver, hemos sobrescrito la regia CSS para el borde y ademas hemos 
aplicado la propiedad box-shadow . El efecto conseguido es que los navegadores 
modernos, que son capaces de procesar el atributo box-shadow, mostraran una sombra 
CSS3 y los no compatibles con esta propiedad al menos mostraran unos estilos para los 
que SI son compatibles. 

Ejercicio 3 

Ver enunciado 

4.4 EL METODO load() 

El metodo Modernizr .load o es una sencllla manera para cargar librerias solo cuando los 
usuarios las necesitan, es decir, cuando una funcionalidad en concreto esta (o no) 
disponible. Es una buena manera de ahorrar ancho de banda y mejorar un poco mas el 
rendimiento de la aplicacion. 

Por ejempio, pensemos en que estamos desarrollando una aplicacion basada en el API de 
geolocalizacion de HTML5. Con Modernizr podemos saber si el navegador ofrece soporte 
a ese API, mediante la propiedad Modernizr.geoiocation. Si deseamos cargar unos 
recursos u otros dependiendo de la disponibilidad de esta funcionalidad, el metodo 
Modernizr.load () nOS podra ahorrar algo de codigo fuente y de paso acelerar nuestra 
pagina en algunas ocasiones. Con este metodo podemos indicar a los navegadores que 
no soporten ese API que carguen el polyfill correspondiente, de modo que se pueda 
utilizar esa caracteristica de HTML5 en ellos tambien. 

La sintaxis de Modernizr.load () eS bastante sencllla de comprender. Un ejempio 
sencillo: 


Modernizr.load({ 

test: Modernizr.geolocation, 

yep : 'geo.j s ' , 

nope: 'geo-polyfill.js ' 

}) ; 

En este ejempio, se decide que script se debe cargar, en funcion de si la geolocalizacion 
esta soportada por el navegador o no. De esta manera, nos ahorramos el tener que 
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descargar codigo que el navegador no soporta y por lo tanto, no necesita. 

Modernizr.load0 es Simple y eflcaz, pero podemos utilizarlo de manera mas compleja, 
como se muestra en el siguiente ejempio: 

// Give Modernizr.load a string, an object, or an array of strings and objects 
Modernizr.load([ 

// Presentational polyfills 

{ 

// Logical list of things we would normally need 

test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients , 

// Modernizr.load loads css and javascript by default 
nope : [ 'presentational-polyfill.js' , 'presentational.css' ] 

}, 

// Functional polyfills 

{ 

// This just has to be truthy 

test : Modernizr.websockets && window.JSON, 

// socket-io.js and json2.js 
nope : 'functional-polyfills.js' , 

// You can also give arrays of resources to load, 
both : [ 'app.js', 'extra.js' ], 

complete : function () { 

// Run this after everything in this group has downloaded 
// and executed, as well everything in all previous groups 
myApp.init() ; 


// Run your analytics after you've already kicked off all the rest 
// of your app. 

'post-analytics.js' 

] ) ; 

Ejercicio 4 
Ver enunciado 

INDICE DE CONTENIDOS 

Que es Modernizr 

4.1 Anadir Modernizr a una pagina 

4.2 Objeto Modernizr 

4.3 Clases CSS en Modernizr 

4.4 El metodo loado 


http://www.arkaitzgarro.com/htnil5/capitulo-4.html[13/07/2015 11:59:48] 


Que es Modernizr I HTML5 


http://www.arkaitzgarro.com/htnil5/capitulo-4.html[13/07/2015 11:59:48] 



Dataset I HTML5 


HTML5 ■<— Anterior Siguiente 


CAPITULO 5 DATASET 


Gracias a HTML5, ahora tenemos la posibilidad de incorporar atributos de datos 
personalizados en todos los elementos HTML. Hasta la aparicion de estos atributos, la 
manera de lograr un comportamiento similar (asociar datos a elementos), era incluir 
estos datos como clases CSS en los elementos, y acceder a ellos a traves de jQuery, de 
una manera como la siguiente: 


<input class=" spaceship shields-5 lives-3 energY-75"> 

Una vez definidos los "atributos", era necesario acceder a estas clases y realizar un 
trabajo extra para extraer su nombre y su valor (convertir energy-75en energy = 75). 

Afortunadamente, esto ya no es necesario, gracias a los atributos dataset. Estos nuevos 
atributos de datos personalizados constan de dos partes: 

• Nombre del atributo: el nombre del atributo de datos debe ser de al menos un 
caracter de largo y debe tener el prefijo data-. No debe contener letras 
mayusculas. 

• Valor del atributo: el valor del atributo puede ser cualquier string o cadena. Con 
esta sintaxis, podemos anadir cualquier dato que necesitemos a nuestra aplicacion, 
como se muestra a continuacion: 

<ul id=" vegetable-seeds" > 

<li data-spacing=" 10cm" data-sowing-time="March to June">Carrots</li> 

<11 data-spacing=" 30cm" data-sowing-time="February to March">Celery</li> 

<11 data-spacing="3cm" data-sowing-time="March to September" >Radishes</li> 
</ul> 


Ahora podemos usar estos datos almacenados en nuestro sitio para crear una experiencia 
de usuario mas rica y atractiva. Imagina que cuando un usuario hace die en un 
"vegetable", una nueva capa se abre en el explorador que muestra la separacion de 
semillas e instrucciones de siembra. Gracias a los atributos data- que hemos ahadido a 
nuestros elementos <ii>, ahora podemos mostrar esta informacion al instante sin tener 
que preocuparnos de hacer ninguna llamada ajax y sin tener que hacer ninguna 
consulta a las bases de datos del servidor. 

Prefijar los atributos personalizados con data- asegura que van a ser completamente 
ignorados por el agente de usuario. Por lo que al navegador y al usuario final de la web 
se refiere, no existe esta informacion. 
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Custom data attributes are intended to store custom data private to the page or 
application, for which there are no more appropriate attributes or elements. These 
attributes are not intended for use by software that is independent of the site that 
uses the attributes. Every HTML element may have any number of custom data 
attributes specified, with any value. 

W3C Specification 

Esto es, los atributos de datos personalizados estan destinadas a almacenar los datos 
personalizados que son de interes exclusivamente para la pagina o la aplicacion, para los 
que no hay atributos o elementos mas apropiados. Estos atributos no estan destinados 
para un uso externo (a traves de un software independiente al sitio que los utiliza). Cada 
elemento HTML puede tener un numero indefinido de atributos de datos personalizados, 
con cualquier valor. 

5.1 UTILIZACION DE LOS DATA ATTRI BUTES 

Como los atributos de datos personalizados son validos en HTML5, pueden ser utilizados 
en cualquier navegador que soporte HTML5 doctypes. Estas son algunas de las formas 
en las que pueden ser utilizados: 

• Para almacenar la altura inicial o la opacidad de un elemento que pudiera ser 
necesaria en los calculos de animacion J avaScript posteriores. 

• Para almacenar los parametros para una pelfcula de Flash que se carga a traves de 
J avaScript. 

• Para almacenar los datos estadisticos de una web. 

• Para almacenar los datos acerca de la salud, municion o vida de un elemento en un 
juego J avaScript. 

• Para poder ahadir subtftulos a un <video>. 

Y estas algunas de las situaciones para las que no se deben usar los data attributes: 

• Los atributos de datos personalizados no deben usarse si hay un atributo o elemento 
existente que es mas adecuado. 

• Estos tampoco tienen la intencion de competir con microformatos. En la 
especificacion queda claro que los datos no estan pensados para ser usados 
publicamente. El software externo no debe interactuar con ellos. 

• La presencia/ausencia de un atributo de datos personalizado no se deben utilizer 
como una referenda para los estilos de CSS. Si se hace, podria sugerir que los 
datos que se estan almacenando son de importancia inmediata para el usuario y se 
deberian marcar de una manera mas accesible. 
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5.2 DATA ATTRI BUTES Y J AVASCRI PT 

Ahora que comprendemos el funcionamiento de los atributos de dates personalizados y 
cuando se utilizan, deberiamos centrarnos en come interactuar con ellos utilizando 
J avaScript. 

Si quisieramos recuperar o actualizar estos atributos utilizando J avaScript, podriamos 
hacerlo utilizando los metodos getAttrlbute y setAttrlbute . 

<div id= "strawberry-plant" data-f ruit=" 12" ></div> 


<scrlpt> 

// "Getting" data-attrlbutes using getAttrlbute 

var plant = document.getElementByld ("strawberry-plant") ; 

var frultCount ^ plant.getAttrlbute( "data-frult") ; // frultCount = "12" 

// "Setting" data-attrlbutes using setAttrlbute 
plant.setAttrlbute( "data-frult7") ; // Pesky birds 
</scrlpt> 


Este metodo funcionara en todos los navegadores modernos, pero no es la manera en la 
que los data attributes deben ser utilizados. La mejor manera para lograr lo mismo es 
mediante el acceso a la propiedad dataset de un elemento. Al utilizer este metodo, en 
lugar de utilizer el nombre del atributo complete, se puede prescindir del prefijo data- y 
referirse a los atributos de dates personalizados utilizando directamente los nombres 
que se ban asignado. 


<dlv ld="sunflower" data-leaves="47" data-plant-helght="2 .4m"></dlv> 


<scrlpt > 

// "Getting" data-attrlbutes using dataset 

var plant = document.getElementByld ("sunflower") ; 

var leaves ^ plant.dataset.leaves ; // leaves = 47; 

// "Setting" data-attrlbutes using dataset 

var tallness ^ plant.dataset.plantHelght ; // "plant-height" -> "plantHelght" 
plant.dataset.plantHelght = "3.6m"; // Cracking fertiliser 

</ scrlpt> 

Si en algun momento un atributo data- especifico ya no es necesario, es posible 
eliminarlo por complete del elemento DOM estableciendo un valor nulo. 


plant.dataset.leaves = null; 


En conclusion, los data attributes personalizados son una buena manera de simplificar el 
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almacenamiento de dates de la aplicacion en las paginas web. 
Ejercicio 5 
Ver enunciado 

INDICE DE CONTENIDOS 

Dataset 

5.1 Utilizacion de los data attributes 

5.2 data attributes y JavaScript 
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CAPITULO 6 MULTIMEDIA 


Hasta hace no mucho tiempo, la tecnologfa Flash era el dominador indiscutible en el 
campo multimedia de la web. Gracias a esta tecnologfa es relativamente sencillo 
transmitir audio y vfdeo a traves de la red, y realizar animaciones que de otra manera 
serfa imposible. Practicamente todos los navegadores tienen incorporado un plugin para 
la reproduccion de archives flash, por lo que la eleccion era clara. Entonces, iPor que 
una necesidad de cambio? 

Hasta ahora, para incluir un elemento multimedia en un documento, se hacfa uso del 
elemento <object>, cuya funcion es incluir un elemento externo generico. Debido a la 
incompatibilidad entre navegadores, se hacfa tambien necesario el uso del elemento 
<embed> y duplicar una serie de parametros. El resultado era un codigo de este estilo: 

<object width="425" height="344"> 

<param name= "movie" 

value="http://www.youtube.com/v/9sEIlAUFJKw&hl=en_GB& fs = l&" ></param> 
<param name="allowFullScreen" value="true"></param> 

<param name="allowscriptaccess" value="always "></param> 

< embed src="http://www.youtube.com/v/9sFIlAUFJKw&hl=en_GB&fs=l&" 
type= "application/x-shockwave-flash" 
allowscriptacces s="always" 

allowfullscreen="true" width="425" height="344" ></embed> 

</object> 


Dejando de lado que el codigo es poco amigable, en este caso tenemos el problema que 
el navegador tiene que transmitir el vfdeo a un plugin instalado en el navegador, con la 
esperanza que el usuario tenga instalada la version correcta o tenga permisos para 
hacerlo, y muchos otros requisitos que pueden ser necesarios. Los plugins pueden 
causar que el navegador o el sistema se comporte de manera inestable, o incluso 
podemos crear una inseguridad a usuarios sin conocimientos tecnicos, a los que se pide 
que descarguen e instalen un nuevo software. 

De alguna manera, podemos estar creando una barrera para ciertos usuarios, algo que 

no es para nada deseable. 


6.1 VIDEO 

Una de las mayores ventajas del elemento <video> (y <audio> ) de HTML5, es que, 
finalmente, estan totalmente integrados en la web. Ya no es necesario depender de 
software de terceros, y esto es una gran ventaja. 
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Asi que ahora, el elemento <video> pueden personalizarse a traves de estilos CSS. Se 
puede cambiar su tamano y animarlo con transiciones CSS, por ejemplo. Podemos 
acceder a sus propiedades a traves de J avaScript, transformarlos y mostrarlos en un 
<canvas> . Y lo mejor de todo, es que podemos manipularlos con total libertad, ya que 
pertenecen al estandar. Ya no se ejecutan en una caja negra a la que no tenfamos 
acceso. 

A pesar de que la etiqueta <video> se presenta como una alternativa de flash, sus 
funcionalidades van mucho mas alia, como veremos a continuacion. 

6.1.1 MARCADO 

Para hacer funcionar el video en HTML, es suficiente con incluir el siguiente marcado, de 
manera similar que lo hacemos con las imagenes: 

<video src= "movie.webm"> </video> <!— Esto funciona en un mundo ideal —> 

Sin embargo, este ejemplo realmente no hace nada por el momento. Lo unico que se 
muestra es el primer fotograma de la pelicula. Esto es asi porque no le hemos dicho al 
navegador que inicie el video, ni le hemos mostrado al usuario ningun tipo de control 
para reproducir o pausar el video. 

6.1.2 AUTOPLAY 

Si bien podemos indicar al navegador que reproduzca el video de manera automatica una 
vez se haya cargado la pagina, en realidad no es una buena practica, ya que a muchos 
usuarios les parecera una practica muy intrusiva. Por ejemplo, los usuarios de 
dispositivos moviles, probablemente no querran que el video se reproduzca sin su 
autorizacion, ya que se consume ancho de banda sin haberlo permitido explicitamente. 
No obstante, la manera de hacerlo es la siguiente: 


<video src="movie.webm" autoplay> 

< ! -- Your fallback content here —> 

</video> 

6.1.3 CONTROLS 

Proporcionar controles es aproximadamente un 764% mejor que reproducir el video de 
manera automatica. La manera de indicar que se muestren los controles es la siguiente: 


<video src="movie.webm" controls> 

<!— Your fallback content here —> 
</video> 


Naturalmente, y al igual que ocurre con los campos de formulario, los navegadores 
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muestran los controles de manera diferente, ya que la especificacion no indica que 
aspecto deben tener. De todas maneras, independientemente del aspecto, todos ellos 
coinciden en los controles a mostrar: reproducir/pausa, una barra de progreso y un 
control de volumen. Normalmente, los navegadores esconden los controles, y solamente 
aparecen al mover el raton sobre el video al utilizar el teclado para controlar el video. 


0 O O 

<- C 


Q| Controles de video X 

Q www.arkaitzgarro.com 


21 


K 



Figura 6.1 Controles de video en Google Chrome 

6.1.4 POSTER 

El atributo poster indica la imagen que el navegador debe mostrar mientras el video se 
esta descargando, o hasta que el usuario reproduce el video. Esto elimina la necesidad 
de mostrar una imagen externa que despues hay que eliminar con J avaScript. Si no se 
indica este atributo, el navegador muestra el primer fotograma del video, que puede no 
ser representativo del video que se va a reproducir. 
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Figura 6.2 Fotograma poster del video anterior 

6.1.5 MUTED 

El atributo muted, permite que el elemento multimedia se reproduzca inicialmente sin 
sonido, lo que requiere una accion por parte del usuario para recuperar el volumen. En 
este ejempio, el video se reproduce automaticamente, pero sin sonido: 


<video src="movie.webm" controls autoplay loop muted> 

<!— Your fallback content here --> 

</video> 

6.1.6 HEIGHT, WIDTH 

Los atributos height y width indican al navegador el tamano del video en pixels. Si no 
se indican estas medidas, el navegador utiliza las medidas definidas en el video de 
origen, si estan disponibles. De lo contrario, utiliza las medidas definidas en el 
fotograma poster, si estan disponibles. Si ninguna de estas medidas esta disponible, el 
ancho por defecto es de 300 pixels. 

Si unicamente se especifica una de las dos medidas, el navegador automaticamente 
ajusta la medida de la dimension no proporcionada, conservando la proporcion del video. 

Si por el contrario, se especifican las dos medidas, pero no coinciden con la proporcion 
del video original, el video no se deforma a estas nuevas dimensiones, sino que se 
muestra en formato letterbox manteniendo la proporcion original. 
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6.1.7 LOOP 

El atributo loop indica que el video se reproduce de nuevo una vez que ha finalizado su 
reproduccion. 

6.1.8 PRELOAD 

Es posible indicar al navegador que comience la descarga del video antes de que el 
usuario inicie su reproduccion. 


<video src= "movie.webm" controls preload> 
<!— Your fallback content here —> 
</video> 


Existen tres valores definidos para preload. Si no indicamos uno en concreto, es el 
propio navegador el que decide que hacer. Por ejemplo, en un dispositive movil, el 
comportamiento por defecto es no realizar ninguna descarga hasta que el usuario lo 
haya indicado. Es importante recordar que un desarrollador no puede controlar el 
comportamiento de un navegador: preload es un consejo, no un comando. El 
navegador tomara una decision en funcion del dispositive, las condiciones de la red y 
otros factores. 

• preload=auto : Se sugiere al navegador que comience la descarga. 

• preload=none : Se sugiere al navegador que no comience la descarga hasta que lo 
indique el usuario. 

• preload=metadata : este estado sugiere al navegador que cargue los metadatas 
(dimensiones, fotogramas, duracion...), pero no descarga nada mas hasta que el 
usuario lo indique. 

6.1.9 SRC 

Al igual que en elemento <img>, el atributo src indica la localizacion del recurso, que el 
navegador debe reproducir si el navegador soporta el codec o formato especffico. Utilizar 
un unico atributo src es unicamente util y viable en entornos totalmente controlados, 
donde conocemos el navegador que accede al sitio web y los codecs que soporta. 

Sin embargo, como no todos los navegadores pueden reproducir los mismos formatos, en 
entornos de produccion debemos especificar mas de una fuente de video. 

6.2 CODECS, LA NUEVA GUERRA 

En los primeros borradores de la especificacion de HTML5, se indicaba que se debfa de 
ofrecer soporte para al menos dos codecs multimedia: Ogg Vorbis para audio y Ogg 
Theora para video. Sin embargo, estos requisitos fueron eliminados despues de que 
Apple y Nokia se opusieran, de modo que la especificacion no recomendase ningun 
codec en concreto. Esto ha creado una situacion de fragmentacion, con diferentes 
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navegadores optando por diferentes formatos, basandose en sus ideologfas o 
convicciones comerciales. 

Actualmente, hay dos codecs principales que debemos tener en cuenta: el nuevo fornnato 
WebM, construido sobre el fornnato VPS que Google compro y ofrece de manera libre, y 
el fornnato MP4, que contiene el codec propietario H.264. 



WEBM 

MP4 

OGV 

Opera 

Si 

No 

Si 

Fi refox 

Si 

Si 

Si 

Chrome 

Si 

No 

Si 

IE9+ 

No 

Si 

No 

Safari 

No 

Si 

No 


WebM funciona en IE9+ y Safari si el usuario ha instalado los codec de manera manual. 

Por lo tanto, la mejor solucion en estos mementos es ofrecer tanto el formate libre 
WebM, como el propietario H.264. 

6.2.1 MULTIPLES ELEMENTOS <S0URCE> 

Para poder ofrecer ambos formatos, primeramente debemos codificarlos por separado. 
Existen diversas herramientas y servicios on-line para realizar esta tarea, pero quizas el 
mas conocido sea Miro Video Converter. Este software, disponible para Windows y Mac, 
nos permite convertir los videos en formate Theora, o H.264 (y muchos otros) 
optimizados para diferentes tipos de dispositivos como iPhone, Android, PS2, etc. 

Una vez dispongamos el video en los distintos formatos, es necesario indicar todas las 
localizaciones de estos formatos, para que sea el navegador el que decida que formate 
reproducir. Evidentemente, no podemos especificarlos todos dentro del atributo scr, por 
lo que tendremos que hacerlo de manera separada utilizando el elemento <source>. 


<video controls> 

<source src="leverage-a-synergy.mp4" type= 'video/mp4; codecs="avcl.42E01E, 
mp4a.40.2" '> 

<source src= "leverage-a-synergy.webm" type= 'video/webm; codecs="vp8, vorbis 

" ' > 

<p>Your browser doesn't support video. 

Please download the video in <a href ="leverage-a-synergy.webm" >webM</a> 
or <a href="leverage-a-synergy.mp4 ">MP4</a> format. 

</p> 

</video> 
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6.2.2 MEDIA QUERIES PARA video 

Los ficheros de video tienden a ser pesados, y enviar un video en alta calidad a un 
dispositivo con un tamano de pantalla reducido es algo totalmente ineficiente. No hay 
ningun inconveniente en hacerlo, pero si comprimimos el video y disminuimos sus 
dimensiones, conseguiremos reducir su tamano (en mb), algo de agradecer en entornos 
moviles y que dependen de una conexion de datos. 

HTML5 permite utilizar el atributo media en el elemento <source> , ofreciendo la misma 
funcionalidad que los Media Queries en CSS3. Por lo tanto, podemos consultar al 
navegador por el ancho de la pantalla, la relacion de aspecto, colores, etc, y definir el 
video correcto segun las caracteristicas del dispositivo. 


<video controls> 

<source src= "hi-res . mp4 " media=" (rnin-device-width : 800px) "> 
<source src="lo-res.mp4" > 

</video> 


6.3 API MULTIMEDIA 

Los elementos multimedia <video> y <audio> ofrecen un API JavaScript muy complete y 
facil de utilizar. Los eventos y metodos de los elementos de audio y video son 
exactamente los mismos, su unica diferencia se da en los atributos. A continuacion se 
muestra una tabla con el API actual: 


Atributos 

Metodos 

Eventos 

error state 

loadO 

load start 

error 

canPlayType(type) 

progress 

network state 

playO 

suspend 

sre 

pauseO 

abort 

currentSrc 

addTrack(label, kind, language) 

error 

networkState 


emptied 

preload 


stalled 

buffered 


play 

ready state 


pause 

readyState 


loadedmetadata 

seeking 


loadeddata 

controls 


waiting 
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controls 

volume 

muted 

tracks 

tracks 

playback state 

currentTime 

startTime 

muted 

paused 

defaultPlaybackRate 

playbackRate 

played 

seekable 

ended 

autoplay 

loop 

width [video only] 
height [video only] 
videoWidth [video only] 
videoHeight [video only] 
poster [video only] 


playing 

canplay 

canplaythrough 

seeking 

seeked 

timeupdate 

ended 

ratechange 


Gracias a J avaScript y a este nuevo API, tenemos el control completo sobre los 
elementos multimedia. Esto significa que podemos crearnos nuestros propios controles, 
extendiendo los que nos ofrece el navegador. Un simple ejempio de acceso al API del 
elemento video: 


video.addEventListener (' canplay' , function (e) { 

this. volume = 0.4; 
this .currentTime ^ 10; 
this .play() ; 
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} , false) ; 


6.4 FULLSCREEN VIDEO 

Flash ha ofrecido un modo de pantalla completa durante muchos ahos a la que nnuchos 
navegadores se han resistido. La razon principal es la seguridad; ya que si se fuerza a 
una aplicacion o web a funcionar a pantalla completa, el usuario pierde el control del 
propio navegador, la barra de tareas y controles estandar del sistema operative. Puede 
que el usuario no sepa despues volver del modo de pantalla completa, o puede haber 
problemas de seguridad relacionados, como la simulacion del sistema operative, peticion 
de password, etc. 

Este nuevo API establece un unico elemento full-screen. Esta pensado para imagenes, 
video y juegos que utilizan el elemento canvas . Una vez que un elemento pasa a 
pantalla completa, aparece un mensaje de forma temporal para informar al usuario de 
que puede presionar la tecia esc en cualquier memento para volver a la ventana 
anterior. 

Las principales propiedad, metodos y estilos son: 

• element.requestFuiiscreeno : hace que un elemento Individual pase a pantalla 
completa. 


document.getElementByld( "myvideo" ).requestFullScreen(). 


• document.cancelFullScreen () : Sa le del modo pantalla completa y vuelve a la vista 
del documento. 

• document. fullscreen : devuelve true sl el navegador esta en pantalla completa. 

• :full-screen : Se trata de una pseudo-clase CSS que se aplica a un elemento 
cuando esta en modo pantalla completa. 

Ademas, podemos modificar los estilos del elemento utilizando CSS: 


#myelement 


width: SOOpx; 


#myelement:full-screen 


width: 100%; 


#myelement:full-screen img 


width: 100%; 

} 
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6.5 AUDIO 

El elemento multimedia audio es muy similar en cuanto a funcionalidad al elemento 
video. La principal diferencia existe al indicar el atributo controls o no. Si lo 
especificamos, el elemento se mostrara en la pagina juntamente con los controles. Si no 
lo hacemos, el audio se reproducira, pero no existira ningun elemento visual en el 
documento. Por supuesto, el elemento existira en el DOM y tendremos acceso complete 
a su API desde JavaScript. 

6.5.1 MARCADO 

Para hacer funcionar el audio en HTML, al igual que con el video es suficiente con incluir 
lo siguiente: 


<audio src="audio.mp3"> 
</ audio> 


Los formates soportados por los navegadores son los siguientes: 



MP3 

MP4 

WAV 

OGG 

Opera 

No 

No 

Si 

Si 

Fi refox 

No 

No 

Si 

Si 

Chrome 

Si 

Si 

Si 

Si 

IE9+ 

Si 

Si 

No 

No 

Safari 

Si 

Si 

Si 

No 


Por lo tanto, la mejor solucion en estos mementos es ofrecer tanto el formate libre OGG, 
come el propietario MP3, marcado de la siguiente manera: 


<audio controls> 

<source src="audio.ogg" type="audio/ogg"> 
<source src="audio.mp3" type="audio/mpeg"> 
</audio> 


Ejercicio 6 
Ver enunciado 

INDICE DE CONTENIDOS 

Multimedia 
6.1 Video 
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6.2 Codecs, la nueva guerra 

6.3 API multimedia 

6.4 Fullscreen video 

6.5 Audio 
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HTML5 ■<— Anterior Siguiente 


CAPITULO 7 CANVAS 


El elemento canvas proporciona un API para dibujar Imeas, formas, imagenes, texto, etc 
en 2D, sobre el lienzo que del elemento. Este API ya esta siento utilizado de manera 
exhaustiva, en la creacion de fondos interactivos, elementos de navegacion, 
herramientas de dibujado, juegos o emuladores. Este elemento canvas es uno de los 
elementos que cuenta con una de las mayores especificaciones dentro de HTML5. De 
hecho, el API de dibujado en 2D se ha separado en un documento a parte. 

Un ejempio de lo que se puede llegar a crear, es la recreacion del programa MS Paint 
incluido en Windows 95. 

0 n O CanvasPaint k' 



I Mostrar un menu _a*.------1 

Figura 7.1 MS Paint desarrollado sobre canvas 

7.1 ELEMENTOS BASICOS 
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Para comenzar a utilizar el elemento canvas, debemos colocarlo en el documento. El 
marcado es extremadamente sencillo: 


<canvas id="tutorial" width="150" height="150"></canvas> 


Este nos recuerda nnucho al elennento img, pero sin los atributos src y ait. En realidad, 
el elennento canvas solamente tiene los dos atributos mostrados en el ejempio anterior: 
width y height, ambos opclonales y que pueden establecerse mediante las propiedades 
DOM. Cuando estos dos atributos no se especifican, el lienzo (canvas) inicial sera de 
300px de ancho por isopx de alto. Este elemento, ademas y como muchos otros, 
pueden modificarse utilizando CSS. Podemos aplicar cualquier estilo, pero las reglas 
afectaran al elemento, no a lo dibujado en el lienzo. 

En la actualidad, todos los navegadores son compatibles con el elemento canvas, la 
diferencia entre ellos radica en que funcionalidades del API ban implementado. 

Ahora que el elemento canvas esta definido en el documento, la manera de dibujar en el 
es a traves de J avaScript. El primer paso es obtener el contexto de dibujado. <canvas> 
crea una superficie de dibujo de tamano fijo que expone uno o mas contextos de 
representacion, que se utilizan para crear y manipular el contenido mostrado. En el 
contexto de representacion 2D, (existe otro contexto de representacion en 3D, llamado 
WebGL), el canvas esta inicialmente en bianco y, para mostrar algo, es necesario el 
acceso de un script al contexto de representacion para que pueda dibujar en el. El 
metodo DOM getcontext slrve para obtener el contexto de representacion y sus 
funciones de dibujo. 


var canvas = document.getElementByld (' tutorial ') ; 
var ctx = canvas.getContext (' 2d ') ; 

El siguiente ejempio dibujaria dos rectangulos que se cruzan, uno de los cuales tiene 
transparencia alfa. 

<html> 

<head> 

<script type="application/javascript"> 
window.onload = function () { 

var canvas = document.getElementByld("canvas"); 
if (canvas.getcontext) { 

var ctx = canvas.getcontext("2d"); 
ctx.fillStyle = "rgb(200,0,0)"; 
ctx.fillRect (10, 10, 55, 50); 
ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
ctx.fillRect (30, 30, 55, 50); 
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}; 

</script> 

</head> 

<body> 

<canvas id="canvas" width="150" height="150" ></canvas> 
</body> 

</html> 


0 O O Rectangulos semitransparentes 



L 
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Figura 7.2 Rectangulos semitransparentes en canvas 

7.2 DIBUJAR FORMAS 

Para empezar a dibujar formas, es necesario hablar primero de la cuadrfcula del canvas o 
espacio de coordenadas. Normalmente, una unidad en la cuadrfcula corresponde a un px 
en el lienzo. El punto de origen de esta cuadrfcula se coloca en la esquina superior 
izquierda (coordenadas(0,0)). Todos los elementos se colocan con relacion a este origen. 

Desgraciadamente, canvas solamente admite una forma primitiva: los rectangulos, por lo 
que el resto de las formas deberan crearse mediante la combinacion de una o mas 
funciones. 

Existen tres funciones que dibujan un rectangulo en el lienzo: 

• fillRect(x,y,width,height)! dibuja un rectangulo relleno . 

• strokeRect(x,y,width,height)! dibuja un contorno rectangular . 

• ciearRect (x, y, width, height) : borra el area especificada y hace que sea 
totalmente transparente. 

Cada una de estas funciones tiene los mismos parametros. x e y especifican la posicion 
en el lienzo. width es la anchura y height la altura. 


var canvas = document.getElementByld (' tutorial ') ; 
var ctx = canvas.getContext (' 2d ') ; 
ctx.fillRect (25,25,100,100); 
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ctx.clearRect (45,45,60,60); 
ctx.strokeRect (50,50,50,50); 

La funcion fiiiRect dibuja un gran cuadrado negro de 100x100 px. La funcion 
clearRect elimina un cuadrado de 60x60 px del centre y finalmente el strokeRect 
dibuja un contorno rectangular de 50x50 px en el interior del cuadrado despejado. 

A diferencia de las funciones de rutas que veremos en la siguiente seccion, las tres 
funciones de rectangulo se dibujan inmediatamente en el lienzo. 

0 O O Dibujar rectangulos ^ 
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Figura 7.3 Dibujado de rectangulos en canvas 

7.3 RUTAS 

Gracias al API 2D, es posible movernos a traves del canvas y dibujar lineas y formas. Las 
rutas son utilizadas para dibujar formas (Imeas, curvas, polfgonos, etc) que de otra 
forma no podriamos conseguir. 

El primer paso para crear una ruta es llamar al metodo beginPath. I nternamente, las 
rutas se almacenan como una lista de subrutas (Imeas, arcos, etc.) que, en conjunto, 
forman una figura. Cada vez que se llama a este metodo, la lista se pone a cero y 
podemos empezar a dibujar nuevas formas. El paso final seria llamar al metodo 
ciosePath: este metodo intenta cerrar la forma trazando una Imea recta desde el punto 
actual hasta el inicial. Si la forma ya se ha cerrado o hay solo un punto en la lista, esta 
funcion no hace nada. 


var canvas = document.getElementByld (' tutorial ') ; 
var context ^ canvas.getContext (' 2 d ') ; 


context.beginPath (); 

//... path drawing operations 
context.closePath (); 

El siguiente paso es dibujar la forma como tal. Para ello, disponemos de algunas 
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funciones de dibujado de lineas y arcos, que especifican las rutas a dibujar. 

7.3.1 METODO lineto 

Para dibujar lineas rectas utilizamos el metodo iineTo. Este metodo toma dos 
argumentos x e y, que son las coordenadas del punto final de la linea. El punto de 
partida depende de las rutas anteriores. 

En el siguiente ejempio se dibujan dos triangulos, uno relleno y el otro unicamente 
trazado. En primer lugar se llama al metodo beginPath para iniciar una nueva ruta. A 
continuacion, utilizamos el metodo moveTo para mover el punto de partida hasta la 
posicion deseada. Finalmente se dibujan dos lineas que forman dos lados del triangulo. 
Al llamar al metodo ciosePath, este traza una Imea al origen, completando el triangulo. 

// Triangulo relleno 
ctx.beginPath() ; 
ct X.move To(25, 25); 
ctx.IineTo(105,25) ; 
ctx.IineTo(25, 105) ; 
ctx.closePath() ; 
ctx.fill() ; 


// Triangulo trazado 
ctx.beginPath() ; 
ctx.move To(125, 125) ; 
ctx.IineTo(125, 45) ; 
ctx.IineTo(45, 125) ; 
ctx.closePath() ; 
ctx.stroke() ; 

En ambos casos utilizamos dos funciones de pintado diferentes: stroke y fill. Stroke 
se utiliza para dibujar una forma con contorno, mientras que fill se utiliza para pintar 
una forma solida. 

7.3.2 ARCOS 

Para dibujar arcos o circulos se utiliza el metodo arc (la especificacion tambien describe 
el metodo arcTo). Este metodo toma cinco parametros: x e y, el radio, startAngie y 
endAngle (que definen los puntos de inicio y final del arco en radianes) y anticlockwise 
(un valor booleano que, cuando tiene valor true dibuja el arco de modo levogiro y 
viceversa cuando es false). 

Un ejempio algo mas complejo que los anteriores utilizando el metodo arc seria: 

for(var 1=0 ; i<4 ; i++){ 

for(var j=0;j<3;j++){ 
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ctx.beginPath() ; 
var X 
var y 
var radius 
var startAngle 
var endAngle 


= 25+j*50; 
- 25+i*50; 
= 2 0 ; 

= 0 ; 


// coordenada x 
// coordenada y 
// radio del arco 
// punto inicial del circulo 


= Math .PI+ (Math . PI* j)/2 ; // punto final 
var anticlockwise = i%2==0 ? false : true; 
ctx.arc (x,y, radius,startAngle,endAngle , anticlockwise) ; 
if (i>l){ 

ctx.fill () ; 

} else { 

ctx.stroke () ; 


© O O Arcos 
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Figura 7.4 Dibujado de arcos en canvas 

Nota 

Los nnetodos arc, bezier y quadratic utilizan radianes, pero si preferimos trabajar 
en grados, es necesario convertirlo a radianes. Esta el la operacion que tenemos 
que llevar a cabo: 

var radians = degrees * Math.PI / 180; 

7 . 3.3 METODO moveto 

Disponemos de la funcion moveTo, que en realidad, aunque no dibuja nada, podemos 
imaginarnosla como 'si levantas un lapiz desde un punto a otro en un papel y lo colocas 
en el siguiente'. Esta funcion es utilizada para colocar el punto de partida en otro lugar o 
para dibujar rutas inconexas. 

ctx.beginPath() ; 

ctx.arc(75 , 75 , 50 , 0 , Math .PI*2 , true ) ; // circulo exterior 
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ctx.closePath() ; 
ctx.fill 0 ; 


ctx.fillStyle = '#FFF'; 
ctx.beginPath(); 

ctx.arc(75,75,35,0,Math.PI,false); // boca (dextrogiro) 

ctx.closePath(); 
ctx.fill(); 

ctx.move To(6 5, 6 5); 
ctx.beginPath(); 

ctx.arc(60,65,5,0,Math.P1*2,true); // ojo izquierdo 

ctx.closePath(); 
ctx.fill 0; 

ctx.move To(9 5, 6 5); 
ctx.beginPath(); 

ctx.arc(90,65,5,0,Math.P1*2,true); // ojo derecho 
ctx.closePath(); 
ctx.fill (); 


© O 


Cara sonriente ;) 



[ Mostrar un menu _J 

Figura 7.5 Dibujar una cara sonriente en canvas 

7.4 COLORES 

Si queremos aplicar colores a una forma, hay dos caracterfsticas importantes que 
podemos Utilizar: flllStyle y strokeStyle. 

fillStyle = color 
strokeStyle = color 


strokeStyle se utiliza para configurar el color del contorno de la forma y fiiistyie es 
para el color de relleno. Color puede ser una cadena que representa un valor de color 
CSS, un objeto degradado o un objeto modelo. 
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// todos ellos configuran fillStyle a 'naranja' (orange) 

ctx.fillStyle = "orange"; 

ctx.fillStyle = "#FFA500"; 

ctx.fillStyle = "rgb(255,165,0)" ; 

ctx.fillStyle ^ "rgba(255,165,0,1)" ; 


Ejemplo de fiiistyie: 


function draw() { 

for (var 1=0 ; i<6 ; i++){ 

for (var j=0 ; j<6 ; j++){ 

ctx.fillStyle = 'rgb ( ' + Math .floor(255-42.5*1) + ' 

+ Math.floor(255-42.5*j) + ',0)'; 
ctx.fillRect(j*25,i*25,25,25) ; 



Ejemplo de strokeStyle : 

function draw() { 

for (var 1=0 ; i<6; i++){ 

for (var j=0;j<6; j++){ 

ctx.strokeStyle = 'rgb(0,' + Math .floor(255-42.5*1) 

+ ',' + ath.floor(255-42.5*j) + ')'; 

ctx.beginPath () ; 

ctx.arc(12.5+j*25,12.5+1*25, 10,0, Math .PI*2 , true ) ; 
ctx.stroke () ; 



7.5 DEGRADADOS Y PATRONES 

A traves del contexto, es posible generar degradados lineales, radiales o rellenos a traves 
de patrones, que pueden ser utilizados en el metodo fiiistyie del canvas. Los 
degradados funcionan de una manera similar a los definidos en CSS3, donde se 
especifican el inicio y los pasos de color para el degradado. 

Los patrones, por otra parte, permiten definir una imagen como origen y especificar el 
patron de repetido, de nuevo de manera similar a como se realizaba con la propiedad 
background-image de CSS. Lo que hace Interesante al metodo createPattem es que 
como origen podemos utilizar una imagen, un canvas o un elemento de video. 

Un simple gradiente se crea de la siguiente manera: 
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var canvas = document.getElementByld (' tutorial ') ; 
var ctx = canvas.getContext (' 2d ') ; 

var gradient = ctx.createLinearGradient(0 , 0, 0, canvas.height) ; 


gradient.addColorStop(0, '#fff'); 

gradient.addColorStop(1, ' #000 ' ); 

ctx.fillStyle = gradient; 

ctx.fillRect(0, 0, canvas.width, canvas.height); 

El codigo anterior creamos un degradado lineal al que aplicamos dos pasos de color. Los 
argumentos de createLinearGradient SOn el punto de inicio del degradado (xi e yi) y 
el punto final del degradado (x 2 e y 2 ). En este caso el degradado comienza en la 
esquina superior izquierda, y termina en la esquina inferior izquierda. Utilizamos este 
degradado para pintar el fondo de un rectangulo. 

0 O Gradiente lineal k”* 
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Figura 7.6 Degradado lineal 

Los degradados radiales son muy similares, con la excepcion que definimos el radio 
despues de cada coordenada: 

var canvas = document.getElementByld (' tutorial ') ; 
var ctx = canvas.getContext (' 2d ') ; 

gradient ctx . createRadialGradient (canvas . width/2 , 

canvas.height/ 2, 

0 , 

canvas.width/2 , 
canvas.height/2, 

150) ; 

gradient.addColorStop(0 , '#fff' ) ; 

gradient.addColorStop(1 , ' #000 ' ) ; 

ctx.fillStyle = gradient; 

ctx.fillRect(0 , 0, canvas.width, canvas.width); 
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La unica diferencia es la manera en la que se ha creado el degradado. En este ejemplo, el 
primer punto del degradado se define en el centre del canvas, con radio cero. El 
siguiente punto se define con un radio de isopx pero su origen es el mismo, lo que 
produce un degradado circular. 

0^0 Gradiente radial k* 
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Figura 7.7 Degradado radial 

Los patrones son incluso mas sencillos de utilizar. Es necesaria una fuente (como una 
imagen, un canvas o un elemento de video) y posteriormente utilizamos esta fuente en 
el metodo createPattem y el resultado de este en el metodo fiiistyie. La unica 
consideracion a tener en cuenta es que, al utilizar elementos de imagen o video, estos 
tienen que haber terminado de cargarse para poder utilizarlos. En el siguiente ejemplo, 
expandimos el canvas para que ocupe toda la ventana, y cuando se carga la imagen, la 
utilizamos como patron de repeticion. 


var canvas = document.getElementByld (' tutorial ') ; 

var img = document.createElement (' img ') ; 

var ctx = canvas.getContext (' 2d ') ; 

canvas.width = window.innerWidth; 

canvas.height = window.innerHeight ; 


img.onload = function () { 

ctx.fillStyle = ctx.createPattern(this, 'repeat'); 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

}; 

img.src = 'avatar.jpg'; 
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Figura 7.8 Uso de patrones en canvas 

7.6 TRANSPARENCIAS 

Ademas de dibujar formas opacas en el lienzo, tambien podemos dibujar formas 
semitransparentes. Esto se hace mediante el establecimiento de la propiedad 
globalAlpha 0 podriamos asignar un color semitransparente al trazo y/o al estilo de 
relleno. 


globalAlpha = transparency value 

Esta propiedad aplica un valor de transparencia a todas las formas dibujadas en el lienzo 
y puede ser util si deseas dibujar un monton de formas en el lienzo con una 
transparencia similar; ya que debido a que las propiedades strokestyie y fiiistyie 
aceptan valores de color CSS3, podemos utilizar la siguiente notacion para asignarles un 
color transparente. 


function draw() { 

// dibujar fondo 
ctx.fillStyle = '#FD0'; 
ctx.fillRect (0,0,75,75) ; 
ctx.fillStyle = '#6C0'; 
ctx.fillRect (75, 0, 75, 75) ; 
ctx.fillStyle = '#09F'; 
ctx.fillRect (0,75,75,75); 
ctx.fillStyle = '#F30'; 
ctx.fillRect (75,75,150,150) ; 
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ctx.fillStyle = '#FFF' ; 

// establecer valor de transparencia 
ctx.globalAlpha = 0.2; 

// Dibujar clrculos semitransparentes 
for (var i=0 ; i<7 ; i++){ 
ctx.beginPath() ; 

ctx.arc (75, 75, 10 + 10*1,0, Math .PI*2 , true ) ; 
ctx.fill () ; 



7.7 TRANSFORMACIONES 

Al igual que tenemos la posibilidad mover el lapiz por el canvas con el metodo moveTo, 
podemos definir algunas transformaciones como rotacion, escalado, transformacion y 
traslacion (similares a las conocidas de CSS3). 

7.7.1 METODO translate 

Este metodo traslada el centre de coordenadas desde su posicion por defecto (0, 0) a la 
posicion indicada. 


ctx.translate(x, y) ; 

7.7.2 METODO rotate 

Este metodo inicia la rotacion desde su posicion por defecto (0,0). Si se rota el canvas 
desde esta posicion, el contenido podria desaparecer por los Ifmites del lienzo, por lo que 
es necesario definir un nuevo origen para la rotacion, dependiendo del resultado 
deseado. 


ctx.rotate(angle) ; 

Este metodo solo precise tomar un parametro, que es el angulo de rotacion que se 
aplicara al marco. Este parametro es una rotacion dextrogira medida en radianes. 


function draw() { 

ctx.translate (75, 75) ; 
for (1 = 1 ; i<6 ; i + + ) { 

// Desplazarse or los anillos (desde dentro hacia fuera) 
ctx.save() ; 

ctx.fillStyle = 'rgb('+ (51*1) + ','+ (255-51*1) + ', 255) ' ; 
for ( j = 0; j<i*6; j++) { 

// dibujar puntos individuales 
ctx.rotate (Math .PI*2/(1*6)) ; 
ctx.beginPath() ; 

ctx.arc (0, 1*12 .5,5,0, Math .P1*2 , true ) ; 
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ctx.fill () ; 

} 

ctx.restore () ; 



7.7.3 METODO SCALE 

El siguiente metodo de transformacion es el escalade. Se utiliza para aumentar o 
disminuir las unidades del tamano de nuestro marco. Este metodo puede usarse para 
dibujar formas ampliadas o reducidas. 

ctx.scale(x, y) ; 

X e Y definen el factor de escala en la direccion horizontal y vertical respectivamente. 

Los valores menores que 1.0 reducen el tamano de la unidad y los valores mayores que 
1.0 aumentan el tamano de la unidad. Por defecto, una unidad en el area de trabajo 
equivale exactamente a un pixel. Si aplicamos, por ejempio, un factor de escalade de 
0.5, la unidad resultante sera 0.5 pixeles, de manera que las formas se dibujaran a 
mitad de su tamano. 

7.8 ANIMACIONES 

Como estamos utilizando scripts para controlar los elementos canvas, resulta muy facil 
hacer animaciones (interactivas). Sin embargo, el elemento canvas no fue disehado 
para ser utilizado de esta manera (a diferencia de flash) por lo que existen limitaciones. 

Probablemente, la mayor limitacion es que una vez que se dibuja una forma, se queda de 
esa manera. Si necesitamos moverla, tenemos que volver a dibujar dicha forma y todo 
lo que se dibujo anteriormente. 

Los pasos basicos a seguir son los siguientes: 

1. Borrar el lienzo: a menos que las formas que se dibujen llenen el lienzo complete 
(por ejempio, una imagen de fondo), se necesitara borrar cualquier forma que se 
haya dibujado con anterioridad. La forma mas sencilla de hacerlo es utilizando el 
metodo clearRect. 

2. Guardar el estado de canvas: si se va a modificar alguna configuracion (estilos, 
transformaciones) que afectan al estado de canvas. 

3. Dibujar formas animadas: representacion del marco. 

4. Restaurar el estado de canvas: restaurar el estado antes de dibujar un nuevo 
marco. 

7.8.1 CONTROL 
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Las formas se dibujan en el lienzo mediante el uso de los metodos canvas directamente 
0 llamando a funciones personalizadas. Necesitamos una manera de ejecutar nuestras 
funciones de dibujo en un periodo de tiempo. Hay dos formas de controlar una 
animacion como esta. En primer lugar esta las funciones setlnterval y setTimeout, 
que se pueden utilizar para llamar a una funcion especifica durante un periodo 
determinado de tiempo. 


setlnterval (animateShape, 500); 
setTimeout (animateShape, 500); 


El segundo metodo que podemos utilizar para controlar una animacion es el input del 
usuario. Si quisieramos hacer un juego, podriamos utilizar los eventos de teclado o de 
raton para controlar la animacion. Al establecer EventListeners , capturamos cualquier 
interaccion del usuario y ejecutamos nuestras funciones de animacion. 

Ejercicio 7 

Ver enunciado 
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CAPITULO 8 ALMACENAMIENTO LOCAL 

El almacenamiento de datos es fundamental en cualquier aplicacion web o de escritorio. 
Hasta ahora, el almacenamiento de datos en la web se realizaba en el servidor, y era 
necesario algun tipo de conexion con el cliente para trabajar con estos datos. Con 
HTML5 disponemos de tres tecnologias que permiten que las aplicaciones almacenen 
datos en los dispositivos cliente. Segun las necesidades de la aplicacion, la informacion 
puede sincronizarse tambien con el servidor o permanecer siempre en el cliente. Estas 
son las posibilidades que tenemos: 

• Web Storage: http://www.w3.org/TR/webstorage/. Es el sistema de 
almacenamiento mas simple, ya que los datos se almacenan en parejas de 
clave/valor. Ampliamente soportado por todos los navegadores. 

• Web SQL Database: http://www.w3.org/TR/webdatabase/. Sistema de 
almacenamiento basado en SQL. La especificacion indica que no va a ser mantenido 
en el future, pero actualmente su uso esta muy extendido y es soportado por 
Chrome, Safari y Opera. 

• IndexedDB: http://www.w3.org/TR/lndexeddb/. Sistema de almacenamiento 
basado en objetos. Actualmente soportado por Chrome, Firefox e Internet Explorer. 

8.1 WEB STORAGE 

Este API de almacenamiento ofrece dos posibilidades para guardar datos en el 
navegador: sessionstorage y locaistorage . El primero mantiene los datos durante la 
sesion actual (mientras la ventana o pestaha se mantenga abierta), mientras que el 
segundo almacena los datos hasta que sean eliminados explfcitamente por la aplicacion 
0 el usuario. Ambos modos de almacenamiento se encuentran relacionados con el 
dominio que los ha creado. 

• sessionstorage: objeto global que mantiene un area de almacenamiento disponible 
a lo largo de la duracion de la sesion de la ventana o pestaha. La sesion persiste 
mientras que la ventana permanezca abierta y sobrevive a recargas de pagina. Si 
se abre una nueva pagina en una pestaha o ventana, una nueva sesion es 
inicializada, por lo que no es posible acceder a los datos de otra sesion. 

• locaistorage: el almacenamiento local por su parte, funciona de la misma forma 
que el almacenamiento de sesion, con la excepcion de que son capaces de 
almacenar los datos por dominio y persistir mas alia de la sesion actual, aunque el 
navegador se cierre o el dispositive se reinicie. 
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Nota 

Cuando hacemos referencia la ventana o pestana, nos estamos refiriendo al objeto 
window. Una nueva ventana abierta utilizando el metodo window.open () , pertenece 
a la misma sesion. 

Tanto sessionstorage como locaistorage forman parte del Web Storage, por lo que 
comparten el mismo API: 


readonly attribute unsigned long length; 
getter DOMString key(in unsigned long index); 
getter DOMString getltem(in DOMString key); 

setter creator void setltem(in DOMString key, in any data); 
deleter void removeltem( in DOMString key); 
void clear () ; 

Este API hace que sea muy sencillo acceder a los datos. El metodo setitem almacena el 
valor, y el metodo getitem lo obtiene, como se muestra a continuacion: 

sessionStorage.setitem( 'twitter' , '@starkyhach' ) ; 

alert ( sessionstorage.getitem (' twitter' ) ); // muestra @starkyhach 

Es importante darse cuenta, que tal y como se indica en el API, el metodo getitem 
siempre devuelve un String, por lo que si intentamos almacenar un objeto, el valor 
devuelto sera "[Object object]". El mismo problema ocurre con los numero, por lo que es 
importante tenerlo en cuenta para evitar posibles errores. Por ejempio: 

sessionstorage.setitem (' total' , 120) ; 
function calcularCosteEnvio(envio) { 

return sessionstorage.getitem (' total' ) + envio; 

} 


alert(calcularCosteEnvio(25)) ; 

En este caso, esperamos que el coste total (120) se almacene como numero, y al anadir 
el coste del envio, el resultado sea 145. Pero como sessionstorage devuelve un String, 
el resultado no es el esperado sino 12025. 

8.1.1 ELI Ml NANDO DATOS 

Disponemos de tres formas de eliminar datos del almacenamiento local: utilizando 
delete, removeltem y clear. El metodo removeltem toma como parametro el nombre 
de la clave a eliminar (el mismo que utilizamos en getitem y setitem), para eliminar un 
Item en particular. Por su parte, el metodo dear, elimina todas las entradas del objeto. 

sessionstorage.setitem( 'twitter' , '@starkyhach' ) ; 
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sessionStorage. set I tern ('flickr', 'starky. hach ' ) ; 

alert ( sessionStorage.length ); // Muestra 2 

sessionStorage.removeltem( 'twitter' ) ; 

alert ( sessionStorage.length ) ; // Muestra 1 

sessionStorage.clear () ; 

alert ( sessionStorage.length ); // Muestra 0 

8.1.2 ALMACENANDO ALGO MAS QUE STRINGS 

Una manera de almacenar objetos es utilizando J SON. Como la representacion de los 
objetos en JSON puede realizarse a traves de texto, podemos almacenar estas cadenas 
de texto y recuperarlas posteriormente para convertirlas en objetos. 


var videoDetails = { 

title : 'Matrix', 

author : ['Andy Wachowski' , 'Larry Wachowski' ] , 
description : 'Wake up Neo, the Matrix has you... 
rating : '-2' 

}; 


sessionStorage.setItern ( 'videoDetails' , JSON.stringify(videoDetails) ) ; 

var videoDetails = JSON.parse(sessionStorage.getItem (' videoDetails ') ; 


8.1.3 EVENTOS DE ALMACENAMIENTO 

Una de las funcionalidades mas interesantes de Web Storage es que incluye una serie de 
eventos que nos indican cuando se ha producido un cambio en los datos almacenados. 
Estos eventos no se lanzan en la ventana actual donde se han producido los cambios, 
sino en el resto de ventadas donde los datos pueden verse afectados. 

Esto quiere decir que los eventos para sessionStorage son lanzados en los itrame 
dentro de la misma pagina, o en las ventanas abiertas con window.open o . Para 
locaistorage, todas las ventanas abiertas con el mismo origen (protocolo + host + 
Puerto) reciben los eventos. 

Cuando se lanzan los eventos, estos contienen toda la informacion asociada con el 
cambio de datos: 


StorageEvent { 

readonly DOMString key; 
readonly any oldValue; 
readonly any newValue; 
readonly DOMString url; 
readonly Storage storageArea ; 

}; 


StorageArea hace referenda al objeto sessionStorage 0 localStorage . EstOS eventOS Se 
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lanzan dentro del objeto window: 

function handleStorage(event) { 

event ^ event I I window.event ; // support IE8 
if (event.newValue === nuli) { // it was removed 
// Do somthing 
} eise { 

// Do somthing else 

} 

} 


window.addEventListener('storage', handleStorage, false); 
window.attachEvent('storage', handleStorage); 


Ejercicio 8 
Ver enunciado 

8.2 WEB SQL 

Web SQL es otra manera de almacenar y acceder a dates en el dispositive. Realmente, 
no forma parte de la especificacion de HTML5, pero es ampliamente utilizado para el 
desarrollo de aplicaciones web. Como su nombre indica, es una base de dates basada en 
SQL, mas concretamente en SQLIte. La utilizacion del API se resume en tres simples 
metodos: 

• openDatabase : abrlr (o crear y abrir) una base de dates en el navegador del cliente. 

• transaction: Inlclar una transacclon. 

• executesqi: ejecutar una sentencia SQL. 

Como en la mayorfa de librearias de J avaScript, el API de Web SQL realize llamadas 
diferidas a funciones, una vez completadas las operaciones. 

transaction.executeSql(sql, [], function () { 

// my executed code lives here 

}) ; 

Debido a la naturaleza de estas llamadas, significa que el API de Web SQL es asmcrono, 
por lo que es necesario tener cuidado con el orden en el que se ejecutan las sentencias 
SQL. Sin embargo, las sentencias SQL se encolan y son ejecutadas en orden, por lo que 
podemos estar tranquilos en ese sentido: podemos crear tablas y tener la seguridad que 
van a ser creadas antes de acceder a los datos. 

8.2.1 CREANDO Y ABRIENDO LA BD 

El uso clasico de la API implica abrir (o crear) la base de datos y ejecutar algunas 
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sentencias SQL. Al abrir la base de dates per primera vez, esta es creada 
automaticamente. Es necesario especificar el numero de version de base de dates con el 
que se desea trabajar, y si no especificamos correctamente este numero de version, es 
posible que provoquemos un error del tipo invalid_state_error. 

var db = openDatabase( 'mydb' , '1.0', 'My first database', 2 * 1024 * 1024); 

La ultima version de la especificacion incluye un quinto argumento en la funcion 
openDatabase, pero no es soportado por muchos navegadores. Los valores que pasamos 
a esta funcion son los siguientes: 

1. El nombre de la base de dates. 

2. El numero de version de base de dates con el que deseamos trabajar. 

3. Un texto descriptive de la base de dates. 

4. Tamano estimado de la base de dates, en bytes. 

El valor de retorno de esta funcion es un objeto que dispone de un metodo transaction, 
a traves del cual vamos a ejecutar las sentencias SQL. 

8.2.2 TRANSACCIONES 

Ahora que tenemos la base de dates abierta, podemos crear transacciones para ejecutar 
nuestras sentencias SQL. La idea de utilizer transacciones, en lugar de ejecutar las 
sentencias directamente, es la posibilidad de realizar rollback. Esto quiere decir, que si la 
transaccion falla por algun motive, se vuelve al estado inicial, como si nada hubiese 
pasado. 


db.transaction( function (tx) { 

tx.executeSql( 'DROP TABLE foo'); 


// known to fail - so should rollback the DROP statement 

tx.executeSql (' INSERT INTO foo (id, text) VALUES (1, "foobar")'); 

}, function (err) { 

alert(err.message) ; 

}) ; 

Una vez listo el objeto transaccion (tx en el ejempio), podemos ejecutar sentencias SQL. 

8.2.3 EJECUTAR SENTENCIAS SQL 

El metodo executesqi es utilizado tanto para sentencias de escritura como de lectura. 
Incluye proteccion contra ataques de inyeccion SQL y proporciona llamadas a metodos 
(callback) para procesar los resultados devueltos por una consulta SQL. 

Su sintaxis es la siguiente: 
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db.transaction( function (tx) { 

tx.executeSql(sqlStatement , arguments, callback, errorCallback) ; 

}) ; 

Donde: 

1. sqlStatement : indica la sentencia SQL a ejecutar. Como hemos dicho, puede ser 
cualquier tipo de sentencia; creacion de tabla, insertar un registro, realizar una 
consulta, etc. 

2. arguments : corresponde con un array de argumentos que pasamos a la sentencia 
SQL. Es recomendable pasar los argumentos a la sentencia de esta manera, ya que 
el propio metodo se ocupa de prevenir inyecciones SQL. 

3. callback: funclon a ejecutar cuando la transaccion se ha realizado de manera 
correcta. Toma como parametros la propia transaccion y el resultado de la 
transaccion. 

4. erroCallback : funclon a ejecutar cuando la transaccion se ha producido un error en 
la sentencia SQL. Toma como parametros la propia transaccion y el error 
producido. 

Un ejempio de seleccion de registros seria el siguiente: 

db.transaction( function (tx) { 

tx.executeSql (' SELECT * FROM foo WHERE id = ?' , [5], 

function callback(tx, results) { 

var len results . rows . length, 1; 
for (1 = 0; 1 < len; i++) { 

alert(results.rows.item(1).text) ; 


function errorCallback(tx, error) { 
alert(error.message) ; 


La funclon de callback recibe como argumentos la transaccion (de nuevo) y un objeto 
que contiene los resultados. Este objeto contiene una propiedad rows, donde 
rows.item( 1 ) contlene la representacion de la fila concreta. Si nuestra tabla contiene un 
campo que se llama nombre, podemos acceder a dicho campo de la siguiente manera: 


results.rows.item(1).nombre 


8.2.4 CREAR TABLAS 
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La primera tarea a realizar cuando trabajamos con una base de dates es crear las tablas 
necesarias para ainnacenar los datos. Como hemos comentado antes, este proceso se 
realize a traves de una sentencia SQL, dentro de una transaccion. Vamos a crear una 
base de datos para almacenar tweets que posteriormente obtendremos de internet: 

db = openDatabase( 'tweetdb' , '1.0', 'All my tweets', 2 * 1024 * 1024); 

db.transaction ( function (tx) { 

tx.executeSql( 'CREATE TABLE IE NOT EXISTS tweets(id, user, date, text)', [] 
, getTweets) ; 

}) ; 

8.2.5 INSERTAR DATOS 

Una vez creada la table, el siguiente peso es inserter los datos correspondientes. Vamos 
a suponer que hemos realizado una peticion AJAX a la API de Twitter, que nos ha 
devuelto una serie de tweets que queremos almacenar en nuestra base de datos. La 
funcion getTweets tendria este aspecto: 

function getTweets() { 

var tweets = $.ajax({...}) ; 

$.each(tweets , function (tweet) { 

db.transaction ( function (tx) { 

var time - (new Date (Date .parse(tweet.created_at))).getTime() ; 

tx.executeSql (' INSERT INTO tweets (id, user, date, text) VALUES (?, 

9 9 9 \ ' 

' r • / • / r 

[tweet.id, tweet.from_user, time / 1000, tweet.text]) 


} 


}) ; 


}) ; 


Nota 

Insertando cada tweet en una nueva transaccion, nos aseguramos que si se 
produce un error en alguna de ellas (ya existia el tweet), se van a seguir 
ejecutando el resto transacciones. 

8.2.6 OBTENER DATOS 

Finalmente, una vez que los datos se encuentran almacenados en la base de datos, solo 
nos queda consultarlos. Como siempre, ejecutamos las sentencia SQL dentro de una 
transaccion y proveemos la funcion que procesara los datos obtenidos: 

db.transaction( function (tx) { 

tx.executeSql( 'SELECT * FROM tweets WHERE date > ?', [time], 

function (tx, results) { 

var html = [], len = results.rows.length; 
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i>' ) ; 


for (var i = 0; i < len; i++) { 

html.push( '<li>' + results.rows.item(i).text + '</! 


tweetEl.innerHTML = html.join( '' ) ; 

}) ; 

}) ; 


Ejercicio 9 
Ver enunciado 

8.3 INDEXEDDB 

indexedDB no 65 una base de dates relacional, sino que se podna llamar un almacen de 
objetos ya que en la base de dates que creemes, existen almacenes y en su interier 
anadimes ebjetes (ceme el siguiente): 


{ 

id:21992, 

nombre : "Memoria RAM" 

} 


En IndexedDB , al igual que en Web SQL, al abrir una base de dates debemes indicar su 
nembre y la version concreta. Posteriormente debemes crear los almacenes de objetos, 
que es muy parecido a un archivador con indices, que nos permite encontrar de una 
manera muy rapida el objeto que buscamos. Una vez el almacen esta listo, podemos 
almacenar cualquier tipo de objeto con el mdice que definamos. No importa el tipo de 
objeto que almacenemos, ni tienen que tener las mismas propiedades. 

8.3.1 CREANDO Y ABRIENDO LA BD 

De forma similar a come haciamos en Web SQL, vamos a abrir una base de datos, y 
trabajar directamente con el objeto que nos devuelve. De nuevo, al igual que en Web 
SQL, las peticiones a la base de datos se realizan de manera asincrona. 

window.IndexedDB - window.indexedDB || window.webkitIndexedDB || window.mozinde 
xedDB; 


if ('webkitIndexedDB' in window) { 

window.IDBTransaction = window.webkitIDBTransaction; 
window.IDBKeyRange = window.webkitIDBKeyRange; 

} 


var request - indexedDB.open (' videos ') ; 
request.onerror = function () { 

console.log (' failed to open indexedDB'); 
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}; 

request.onsuccess = function (event) { 
// handle version control 
// then create a new object store 

}; 


Ahora que la base de dates esta abierta (y asumiendo que no hay errores), se ejecutara 
el evento onsuccess. Antes de poder crear almacenes de objetos, tenemos que tener en 
cuenta los siguiente: 

• Necesitamos un manejador para poder realizar transacciones de insercion y 
obtencion de dates. 

• Hay que especificar la version de la base de dates. Si no existe una version definida, 
significa que la base de dates no esta aun creada. 

El metodo onsuccess recibe como parametro un evento, al igual que lo hace cualquier 
otro metodo escuchador de eventos. Dentro de este objeto, encontramos una propiedad 
llamada target, y dentro de esta otra propiedad llamada result , que contiene el 
resultado de la operacion. En este case especffico, event .target. result contiene la 
base de datos que acabamos de abrir. 

var db = null; 


var request = IndexedDB.open (' videos ') ; 
request.onsuccess = function (event) { 

// cache a copy of the database handle for the future 
db = event.target.result ; 

// handle version control 
// then create a new object store 


request.onerror = function (event) { 

alert (' Something failed: ' + event.target.message) ; 

}; 

Es importante indicar que en IndexedDB , los errores que se producen escalan hasta el 
objeto request. Esto qulere decir, que si un error ocurre en cualquier peticion (por 
ejempio una consulta de datos), en este caso mostraria una alerta con el error. 

8.3.2 CONTROL DE VERSIONES 

El primer paso tras abrir la base de datos es realizar un control de versiones de la base 
de datos. Podemos utilizar cualquier cadena de caracteres como identificador de la 
version, pero lo logico es seguir un patron tfpico de software, como '0.1', '0.2', etc. Al 
abrir la base de datos, debemos comprobar si la version actual de la base de datos 
coincide con la ultima version de la aplicacion. Si son diferentes, tendremos que realizar 
la actualizacion. 
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var db = null, version = '0.1'; 

request.onsuccess = function (event) { 

// cache a copy of the database handle for the future 
db = event.target.result ; 

// handle version control 
if (version != db.version) { 

// set the version to 0.1 

var verRequest = db.setVersion(version) ; 
verRequest.onsuccess = function (event) { 

// now we're ready to create the object store! 

}; 

verRequest.onerror = function () { 

alert (' unable to set the version :' + version); 

}; 


8.3.3 CREAR ALMACENES DE OBJ ETOS 

Tanto la primera vez que creamos nuestra base de dates, como a la bora de actualizarla, 
debemos crear los almacenes de objetos correspondientes. 

var verRequest = db.setVersion(version) ; 
verRequest.onsuccess = function (event) { 

var store = db.createObjectStore (' blockbusters' , { 

keyPath: 'title', 
autoincrement: false 

}) ; 

// at this point we would notify our code 
// that the object store is ready 

}; 


Para este ejempio, hemos creado un unico almacen de objetos, pero lo normal es 
disponer de varies y que puedan relacionarse entre ellos. El metodo createObjectStore 
admite dos parametros: 

• name : indica el nombre del almacen de objetos. 

• optionaiParameters : este parametro permite definir cual va a ser el mdice de los 
objetos, a traves del cual se van a realizar las busquedas y que por tanto debe ser 
unico. Si no deseamos que este mdice se incremente automaticamente al anadir 
nuevos objetos, tambien lo podemos indicar aqui. Al anadir un nuevo objeto, es 
importante asegurarnos que disponga de la propiedad definida como mdice, y que 
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su valor sea unico. 

Es posible que deseemos anadir nuevos indices a nuestros objetos, con el fin de poder 
realizar busquedas posteriormente. Podemos realizarlo de la siguiente manera: 

store.createindex (' director' , 'director', { unique: false }); 

Memos anadido un nuevo mdice al almacen, llamado director (primer argumento), y 
hemos indicado que el nombre de la propiedad del objeto es director (segundo 
argumento), a traves del cual vamos a realizar las busquedas. Evidentemente, varias 
pelfculas pueden tener el mismo director, por lo que este valor no puede ser unico. De 
esta manera, podemos almacenar objetos de este tipo: 


{ 

title: "Belly Dance Bruce - Final Strike", 
date: (new Date ).getTime() , // released TODAY! 

director: "Bruce Awesome", 
length: 169, // in minutes 
rating: 10, 

cover: "/images/wobble.jpg" 

} 


8.3.4 ANADI R OBJ ETOS AL ALMACEN 

Disponemos de dos metodos para anadir objetos al almacen: add y put. 

• add: anade un nuevo objeto al almacen. Es obligatorio que los nuevos datos no 
existan en el almacen, de otro modo esto provocaria un error de tipo 

ConstrainError . 

• put: en cambio, este metodo actualize el valor del objeto si existe, o lo anade si no 
existe en el almacen. 

var video = { 

title: "Belly Dance Bruce - Final Strike", 
date: (new Date ).getTime() , // released TODAY! 

director: "Bruce Awesome", 
length: 169, // in minutes 
rating: 10, 

cover: "/images/wobble.jpg" 

}; 

var myIDBTransaction = 

window.IDBTransaction 

I I window.webkitIDBTransaction 

II { READ_WRITE: 'readwrite' }; 
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var transaction = 

db.transaction([ 'blockbusters' ] , myIDBTransaction.READ_WRITE) ; 
var store ^ transaction.objectStore (' blockbusters ') ; 

// var request = store.add(video); 
var request = store.put(video); 


Analizemos las tres ultimas lineas, utilizadas para anadir un nuevo objeto al almacen: 

1. transaction = db . transaction (['blockbusters'] , READ_WRITE) ! CrsamOS Una 

nueva transaccion de lectura/escritura, sobre los almacenes indicados (en este caso 
solo 'blockbusters'), pero podrian ser varios si es necesario. Si no necesitamos que 
la transaccion sea de escritura, podemos indicarlo con la propiedad 

IDBTransaction.READ_ONLY.. 

2. store = transaction . objectStore (' blockbusters ' ) : obtenemOS el almacen de 

objetos sobre el que queremos realizar las operaciones, que debe ser uno de los 
indicados en la transaccion. Con la referenda a este objeto, podemos ejecutar las 
operaciones de add, put, get, delete, etC. 

3. request = store .put (video) : Insertamos el objeto en el almacen. Si la transaccion 
se ha realizado correctamente, se llamara al evento onsuccess, mientras que si ha 
ocurrido un error, se llamara a onerror. 

8.3.5 OBTENER OBJETOS DEL ALMACEN 

El proceso para acceder a los objetos almacenados es muy similar a lo realizado para 
insertarlos. Seguimos necesitando una transaccion, pero en este caso de solo lectura. El 
proceso es el siguiente: 


var myIDBTransaction = 

window.IDBTransaction 
I I window.webkitIDBTransaction 
I I { READ: 'read' }; 


var key = "Belly Dance Bruce - Final Strike"; 

var transaction = 

db.transaction([ 'blockbusters' ] , myIDBTransaction.READ) ; 
var store = transaction.objectStore (' blockbusters ') ; 

// var request = store.add(video); 
var request ^ store. get (key) ; 


En este caso, lo importante es que la clave (la variable key) que hemos pasado al 
metodo get, buscara el valor que contiene en la propiedad que hemos definido como 
keyPath al crear el almacen de objetos. 

** Nota ** 
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El metodo get produce el mismo resultado tanto si el objeto existe en el almacen 
como si no, pero con un valor undefined . Para evitar esta situacion, es 
recomendable utilizar el metodo opencursor o con la misma clave. Si el objeto no 
existe, el valor del resultado es nuii. 

Para obtener todos los objetos de un almacen, en lugar de un unico objeto, debemos 
hacer uso del metodo openCursor. Este metodo acepta como parametro un objeto de 
tipo IDBKeyRange, que podemos utilizar para acotar la busqueda. 


var transaction = 

db.transaction([ 'biockbusters' ] , myIDBTransaction.READ) ; 
var store = transaction.objectStore (' biockbusters ') ; 
var data ^ [] ; 


var request = store.openCursor () ; 
request.onsuccess = function (event) { 
var cursor = event.target.result ; 
if (cursor) { 

// value is the stored object 
data.push(cursor.value) ; 

// get the next object 
cursor. continue () ; 

} else { 

// we've got all the data now, call 
// a success callback and pass the 
// data object in. 



En ese ejempio, abrimos el almacen de objetos al igual que lo hemos venido haciendo, 
pero en lugar de obtener un unico objeto con el metodo get, abrimos un cursor. Esto 
nos permite iterar por los objetos devueltos por el cursor, todos como es este caso, o los 
que cumplan una condicion concreta. El objeto en concrete al que apunta el cursor en la 
iteracion actual se encuentra almacenado en su propiedad cursor.value . Avanzar en el 
cursor, para obtener el siguiente objeto, es tan sencillo como llamar al metodo 
continue () del cursor, lo que provocara una nueva llamada al evento onsuccess , siendo 
nosotros los que tenemos que controlar si el cursor ya no apunta a ningun objeto 

(cursor === false). 

8.3.6 ELI Ml NAR OBJETOS DEL ALMACEN 

La ultima operacion a realizar sobre el almacen de objetos, es eliminar datos existentes. 
De nuevo, el proceso es practicamente el mismo que para obtener datos: 


var myIDBTransaction - 

window.IDBTransaction 
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Ii window.webkitIDBTransaction 
M { READ_WRITE: 'readwrite' }; 

var transaction = 

db.transaction ( [ 'biockbusters' ] , myIDBTransaction.READ_WRITE) ; 
var store transaction . objectStore (' blockbusters ') ; 
var request = store. delete (key) ; 

Si queremos eliminar todos los objetos de un almacen, podemos utilizar el metodo 
clear 0 , slgulente el mismo proceso visto anteriormente. 

var request = store.clear() ; 

Ejercicio 10 
Ver enunciado 

INDICE DE CONTENIDOS 

Almacenamiento local 

8.1 Web Storage 

8.2 Web SQL 

8.3 IndexedDB 


http://www.arkaitzgarro.com/litnil5/capitulo-8.html[13/07/2015 12:00:29] 


Sin conexion I HTML5 


HTML5 


Anterior Siguiente 


CAPITULO 9 SIN CONEXION 


Si bien todos los navegadores tienen mecanismos de alnnacenamiento en cache, estos 
sistemas no son fiables y no siempre funcionan como debieran. HTML5 permite resolver 
algunas de las molestias asociadas al trabajo sin conexion mediante la interfaz 

ApplicationCache. 

Algunas de las ventajas que conlleva el uso de esta cache para una aplicacion son: 

• Navegacion sin conexion: los usuarios pueden explorar todo el sitio web sin 
conexion. 

• Velocidad: los recursos almacenados en cache son locales y, por tanto, se cargan 

mas rapido. 

• Reduccion de carga del servidor: el navegador solo descarga recursos del servidor 
que han cambiado. 

Para poder trabajar sin conexion, una aplicacion unicamente necesita de un archive de 
manifiesto, el cual indica al navegador que ficheros debe almacenar en la cache local. El 
contenido del manifiesto puede ser tan simple como un listado de archives. Una vez que 
el navegador ha descargado y almacenado los ficheros (html, CSS, imagenes, 
javascripts, etc), el navegador hace uso de estos ficheros, incluso cuando el usuario 
actualiza la pagina en su navegador. 

Ademas de especificar que ficheros van a ser almacenados en la cache, es posible indicar 
cuales no tienen que serlo, y por tanto obligar al navegador a realizar una peticion de 
dichos ficheros al servidor. Finalmente, si intentamos acceder a un fichero no 
almacenado en local, y no disponemos de conexion, podemos mostrar un recurso que 
previamente hemos almacenado en la cache. 

9.1 EL ARCHIVO DE MANIFIESTO DE CACHE 

El archivo de manifiesto es lo que le indica al navegador cuando y que tiene que 
almacenar en su cache, y que tiene que traerse de la Web. Indicar al navegador el 
manifiesto que tiene que utilizer es muy sencillo: 

<!DOCTYPE html> 

<html lang="en" manifest=" /example.appcache" > 

</html> 
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El atributo manifest debe estar incluido en todas las paginas de nuestra aplicacion, que 
queramos que se almacenen en la cache. Es decir, ademas de los ficheros indicados en 
el manifiesto, la propia pagina que incluye el manifiesto es almacenada en la cache. El 
navegador no almacenara en cache ninguna pagina que no contenga el atributo 
manifest (a menos que esa pagina aparezca explfcitamente en el propio archive de 
manifiesto). 

El atributo manifest puede sehalar a una URL absoluta o a una ruta relativa, pero las 
URL absolutas deben tener el mismo origen que la aplicacion web. Un archive de 
manifiesto puede tener cualquier extension, pero se debe mostrar con el tipo MIME 
correcto: 

<html manif est="http://www.example.com/example.mf" > 

</html> 

El tipo MIME con el que se deben mostrar los archives de manifiesto es text/cache- 
manifest . Es posible que se tenga que ahadir un tipo de archive personalizado a la 
configuracion de .htaccess o de tu servidor web. 

9.1.1 ESTRUCTURA 

Ejempio de un archive de manifiesto sencillo: 

CACHE MANIFEST 
index.html 
stylesheet.css 
images/logo.png 
scripts/main.js 


El archive de manifiesto del ejempio permite almacenar en cache los cuatro archives 
especificados. El formate del manifiesto es importante: 

• La cadena cache manifest debe aparecer en la primera linea y es obligatoria. 

• Dentro del manifiesto, los ficheros son listados dentro de categorias, tambien 
conocidos como namespaces. Si no se especifica ninguna categoria, todos los 
ficheros pertenecen a la categoria cache. 

Un ejempio mas complejo seria: 

CACHE MANIFEST 
# 2010-06-18:v2 

CACHE: 

/favicon.ico 
index.html 
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stylesheet.CSS 
images/logo.png 
scripts/main.js 

# Resources that require the user to be online. 

NETWORK: 

login.php 
/myapi 

http://api.twitter.com 

# static.html will be served if main.py is inaccessible 

# offline.jpg will be served in place of all images in images/large/ 

# offline.html will be served in place of all other .html files 
FALLBACK: 

/main.py /static.html 
images/large/ images/offline.jpg 
*.html /offline.html 

Un archive de manifiesto puede incluir tres categorias: cache, network y fallback. 

• cache: esta es la seccion predeterminada para las entradas. Los archives incluidos 
en esta seccion (o inmediatamente despues de cache manifest) se almacenaran en 
cache explicitamente despues de descargarse por primera vez. 

• network: Ios archives incluidos en esta seccion son recursos permitidos que 
requieren conexion al servidor. En todas las solicitudes enviadas a estos recursos se 
omite la cache, incluso si el usuario esta trabajando sin conexion. Se pueden 
utilizer caracteres comodin. 

• fallback: se trata de una seccion opcional en la que se especifican paginas 
alternatives en case de no poder acceder a un recurso. La primera uri corresponde 
al recurso y la segunda, a la pagina alternative. Ambas uri deben estar 
relacionadas y tener el mismo origen que el archive de manifiesto. Se pueden 
utilizer caracteres comodm. 

CACHE MANIFEST 

# 2010-06-18:v3 

# Explicitly cached entries 
index.html 

css/style.css 

# offline.html will be displayed if the user is offline 
FALLBACK: 

/ /offline.html 

# All other resources require the user to be online. 
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NETWORK: 
* 


# Additional resources to cache 


CACHE: 

images/logol.png 
images/logo2.png 
images/logo3.png 


Nota 

Las peticiones de recursos que den como resultado un error 404 (por ejemplo una 
imagen no encontrada), mostraran en este caso el fichero offline.html 

9.2 COMO SERVIR EL MANIFIESTO 

Como hemos comentado anteriormente, el manifiesto puede tener cualquier extension 
(aunque se recomienda que sea .appcache), pero lo importante es que el servidor envie 
el fichero con el tipo MIME correcto. Si utilizamos Apache, es tan sencillo como ahadir la 
siguiente linea al fichero mime.types: 


text/cache-manifest appcache 


Esta configuracion dependera del servidor web que utilicemos. De todas maneras, para 
asegurarnos que el servidor esta enviando el manifiesto con la cabecera correcta, 
podemos utilizar una herramienta como curl de la siguiente manera: 

curl -I http://mysite.com/manifest.appcache 

O bien a traves de las herramientas de desarrollo integradas en Google Chrome, Safari y 
Firefox. De cualquiera de las maneras, la respuesta tendria que ser algo parecido a esto 

HTTP/1.1 200 CK 

Date: Mon, 13 Sep 2010 12:59:30 GMT 

Server: Apache/2.2.13 (Unix) mod_ssl/2.2.13 CpenSSL/O.9.81 DAV/2 PHP/5.3.0 
Last-Modified: Tue, 31 Aug 2010 03:11:00 GMT 
Accept-Ranges: bytes 
Content-Length: 113 


Content-Type: text/cache-manifest 


9.3 PROCESO DE CACHEADO 

Cuando visitamos una pagina que hace uso de la cache de aplicacion, el proceso de 
cacheado que se sigue es el siguiente: 
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1. Navegador: solicita la pagina http://htnnl5app.conn/ 

2. Servidor: devuelve index.htnni 

3. Navegador: procesa la pagina index.html y solicita los recursos asociados, como 
imagenes, javascripts, hojas de estilos y el manifesto. 

4. Servidor: devuelve todos los recursos solicitados. 

5. Navegador: procesa el manifiesto y solicita, de nuevo, todos los recursos definidos 
en el manifiesto. Efectivamente, se produce una doble peticion. 

6. Servidor: devuelve todos los recursos del manifiesto solicitados. 

7. Navegador: la cache de aplicacion esta actualizada, y se lanzan los eventos 
asociados. 

Ahora, el navegador esta listo y la cache contiene los ficheros indicados en el manifiesto. 
Si el manifiesto no ha cambiado, y la pagina se recarga, ocurre lo siguiente: 

1. Navegador: vuelve a solicitar la pagina http://html5app.com/ 

2. Navegador: detecta que tiene una copia local de index.html y la sirve de manera 
local. 

3. Navegador: procesa la pagina index.html y los recursos existentes en la cache se 
sirven de manera local. 

4. Navegador: solicita de nuevo el manifiesto al servidor. 

5. Servidor: devuelve un codigo 304 indicando que no ha cambiado nada en el 
manifiesto. 

Una vez que el navegador tiene almacenados los recursos en su cache, los sirve de 
manera local y despues solicita el manifiesto. Como se puede ver en la siguiente capture 
de pantalla, Google Chrome unicamente solicita al servidor aquellos ficheros que no se 
encuentran en la cache de la aplicacion. 
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© o o 


Q Your clock and mine 




^ ^ G D www.arkaitzgarro.com 


The time on your computer is 22:17:12 and the time on the server is 10:30:10 


Elements 
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1 Sources 
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Profiles Audits 

Console 



Name 

Path 


Met.. 
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Size 

Content 

Zluncy 

60 ms 

91 ms 




time/ 

/examples/ch07 


GET 
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OK 


text/html 


(from cache) 


2 ms 
1 ms 



time.css 

/examples/ch07/time 


GET 


200 

OK 


text/css 


(from cache) 


4 ms 
2 ms 



time.js 

/examples/ch07/time 


GET 


200 

OK 


applicatio... 


(from cache) 


4 ms 
3 ms 


server-time.js 

/examples/ch07/time 


GET 


304 

.. j applicatio... 
Not Modified 


234 B 80 ms 
31B 80 ms 


4 requests I 234 B transferred I 89 ms (onload: 91 ms, DOMContentLoaded: 90 ms) 


© O ^21^ Documents Stylesheets Images Scripts XHR Fonts WebSockets Other ^ 


Figura 9.1 Peticiones realizaidas por Google Chronne 

Si (deseannos actualizar alguno (de los recursos (de la aplicacion, tenidrennos que actualizar 
primero el nnanifiesto, para obligar al navegador a solicitar de nuevo todos los recursos. 
Para ello, es necesario nnarcar de alguna nnanera que el nnanifiesto ha cambiado, aunque 
los ficheros a cachear sean los mismos. Una practica muy sencilla es ahadir una numero 
de version o la fecha de modificacion del nnanifiesto: 


# 2010-06-18:v3 

Una vez que el nnanifiesto ha cambiado, el comportamiento del navegador es el 
siguiente: 

1. Navegador: vuelve a solicitar la pagina http://html5app.com/ 

2. Navegador: detecta que tiene una copia local de index.html y la sirve de manera 
local. 

3. Navegador: procesa la pagina index.html y los recursos existentes en la cache 
se sirven de manera local. 

4. Navegador: solicita de nuevo el manifiesto al servidor. 

5. Servidor: devuelve el nuevo manifiesto modificado. 

6. Navegador: procesa el manifiesto y solicita todos los recursos definidos en el 
manifiesto. 

7. Servidor: devuelve todos los recursos del manifiesto solicitados. 
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8. Navegador: la cache de aplicacion esta actualizada, y se lanzan los eventos 
asociados. 

Hay que destacar, que a pesar de haber modificado los recursos en el navegador, estos 
cannbios no se producen en este momento, ya que se siguen utilizando los cargados 
previamente. La nueva cache solo estaria disponible si volviesemos a recargar la pagina. 
Una manera de modificar este comportamlento es accediendo al objeto 

applicationCache. 

9.4 ACTUALIZACION DE LA MEMORIA CACHE 

El objeto window.applicationCache permite acceder mediante JavaScript a la cache de 
aplicacion del navegador. Su propiedad status permite comprobar el estado de la 
memoria cache, y es el encargado de notificarnos que se ha producido un cambio en la 
cache local. 


var appCache = window.applicationCache ; 
switch (appCache.status) { 

case appCache.UNCACHED : // UNCACHED == 0 
return 'UNCACHED'; break; 
case appCache.IDLE : // IDLE == 1 

return 'IDLE'; break; 
case appCache.CHECKING: // CHECKING == 2 
return 'CHECKING'; break; 
case appCache.DOWNLOADING: // DOWNLOADING == 3 
return 'DOWNLOADING'; break; 
case appCache.UPDATEREADY: // UPDATEREADY == 4 

return 'UPDATEREADY'; break; 
case appCache.OBSOLETE : // OBSOLETE == 5 

return 'OBSOLETE'; break; 
default : 

return 'UKNOWN CACHE STATUS'; break; 


Para actualizar la cache mediante J avaScript, primero se debe hacer una llamada a 
applicationCache.update 0 . Al hacer esa llamada, se intentara actualizar la cache del 
usuario (para lo cual sera necesario que haya cambiado el archivo de manifiesto). 
Finalmente, cuando el estado de applicationCache. status sea updateready, al llamar a 
applicationCache. swapCache (), se sustltulra la antlgua cache por la nueva. 


var appCache = window.applicationCache ; 

appCache.update 0 ; // Attempt to update the user's cache. 

if (appCache.status == window.applicationCache.UPDATEREADY) { 

appCache.swapCache() ; // The fetch was successful, swap in the new cache. 
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} 

Al utilizar update o y swapcacheo de este modo, no se muestran los recursos 
actualizados a los usuarios. El flujo indicado solo sirve para pedirle al navegador que 
busque un nuevo archivo de nnanifiesto, que descargue el contenido actualizado que se 
especifica y que actualice la cache de la aplicacion. Por tanto, la pagina se tiene que 
volver a cargar dos veces para que se muestre el nuevo contenido a los usuarios: una 
vez para extraer una nueva cache de aplicacion y otra para actualizar el contenido de la 
pagina. 

Para que los usuarios puedan acceder a la version mas reciente del contenido de tu sitio, 
podemos establecer un escuchador que controle el evento updateready cuando se 
cargue la pagina: 


window.addEventListener (' load' , function (e) { 

window.app1icationCache.addEventListener( 'updateready function(e) { 

if (window.applicationCache.status == window.applicationCache.UPDATEREA 

DY) { 

// Browser downloaded a new app cache. 

// Swap it in and reload the page to get the new hotness, 
window.applicationCache.swapCache() ; 

if (confirm ('A new version of this site is available. Load it?')) { 

window.location.reload() ; 

} 

} else { 

// Manifest didn't changed. Nothing new to server. 

} 

} , false) ; 

} , false) ; 

Hay, ademas, algunos eventos adicionales que permiten controlar el estado de la cache. 
El navegador activa eventos para una serie de acciones (como el progreso de las 
descargas, la actualizacion de la cache de las aplicaciones y los estados de error). El 
siguiente fragmento permite establecer escuchadores de eventos para cada tipo de 
evento de cache: 


function handleCacheEvent(e) {} 

function handleCacheError(e) { 

alert (' Error: Cache failed to update!'); 

}; 


// Fired after the first cache of the manifest. 

appCache.addEventListener (' cached' , handleCacheEvent, false); 

// Checking for an update. Always the first event fired in the sequence. 
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appCache.addEventListener (' checking' , handleCacheEvent , false); 

// An update was found. The browser is fetching resources. 
appCache.addEventListener( 'downloading' , handleCacheEvent, false) ; 


// The manifest returns 404 or 410, the download failed, 

// or the manifest changed while the download was in progress. 
appCache.addEventListener (' error' , handleCacheError , false); 


// Fired after the first download of the manifest. 

appCache.addEventListener (' noupdate' , handleCacheEvent, false); 

// Fired if the manifest file returns a 404 or 410. 

// This results in the application cache being deleted. 
appCache.addEventListener (' obsolete' , handleCacheEvent, false); 


// Fired for each resource listed in the manifest as it is being fetched. 
appCache.addEventListener (' progress' , handleCacheEvent, false); 


// Fired when the manifest resources have been newly redownloaded. 
appCache.addEventListener( 'updateready' , handleCacheEvent , false ) ; 


Si no se puede descargar el archive de manifiesto o algun recurso especificado en el, 
fallara todo el proceso de actualizacion. Si se produce ese fallo, el navegador seguira 
utilizando la antigua cache de la aplicacion. 

9.5 EVENTOS ONLINE/OFFLINE 

Conno parte de la especificacion de HTML5, el objeto navigator incluye una propiedad 
que nos indica si se dispone de conexion o no, concretamente navigator.onLine. Sin 
embargo, esta propiedad no se comporta de manera correcta en la mayoria de 
navegadores, y unicamente cambia su estado al indicar de manera expifeita que 
funcione en modo offline. Como desarrolladores, lo que realmente nos interesa es 
conocer si realmente hay conexion o no con el servidor. 

Una manera de identificar si existe conexion a internet, es utilizer la categoria FALLBACK 
del manifiesto. En esta categoria podemos indicar dos ficheros J avaScript que detectan 
si estamos online o no: 


CACHE MANIFEST 

FALLBACK: 

online.js offline.js 


onl ine. js contiene: 
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setOnline (true) ; 

Y offline, js contiene: 

setOnline (false) ; 

En nuestra aplicacion, creamos una funcion llamada testOnline que dinamicamente crea 
un elemento <script>, el cual trata de cargar el fichero online.j s. Si la carga se 
realiza de manera correcta, se ejecuta el metodo setoniine (true) . Si estamos offline, 
el navegador cargara el fichero offline.js, ejecutando el metodo setOnline(false). 


function testOnline (fn) { 

var script = document.createElement('script') 
script.src = 'online.js'; 

// alias the setOnline function to the new function that was passed in 
window.setOnline = function (online) { 
document.body.removeChild(script) ; 
fn (online) ; 

}; 


// attaching script node trigger the code to run 
document.body.appendChild(script) ; 


testOnline( function (online) { 
if (online) { 

applicationCache.update() ; 

} else { 

// show users an unobtrusive message that they're disconnected 


}) ; 

Ejercicio 11 
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CAPITULO 10 DRAG AND DROP 


Durante anos, hemos utilizado bibliotecas como jQuery y Dojo para conseguir 
funcionalidades complejas en las interfaces de usuario como las animaciones, las 
esquinas redondeadas y la funcion de arrastrar y soltar. Esta ultima funcionalidad (Drag 
and Drop, DnD) tiene una gran importancia en HTML5, y de hecho se ha integrado en el 
API. En la especificacion, este API se define como un mecanismo basado en eventos, 
donde identificamos los elementos que deseamos arrastrar con el atributo draggable y 
desde J avaScript escuchamos los eventos que se producen, para proporcionar la 
funcionalidad deseada. 

Por defecto, todos los enlaces, imagenes y nodos de texto (o selecciones de texto) de un 
documento HTML son arrastables, pero no hay ningun evento asociado a estas acciones, 
por lo que poco mas podemos hacer, a excepcion de la funcionalidad que nos ofrezca el 
navegador o el propio sistema operative (guardar las imagenes en el escritorio, crear 
ficheros de texto, etc). 

10.1 DETECCION DE LA FUNCIONALIDAD 

Aunque la compatibilidad actual de los navegadores con esta API es bastante amplia, hay 
que tener en cuenta que los dispositivos moviles no soportan esta funcionalidad. Si 
nuestro sitio web esta siendo accedido desde un dispositive movil, y tenemos 
implementada esta funcionalidad (por ejempio en una cesta de la compra), debemos 
proveer otra solucion para que nuestro sitio web se comporte de manera correcta, y no 
perjudicar la experiencia del usuario. 

La manera mas sencilla de comprobar la disponibilidad de este API, es utilizer la 
biblioteca Modernizr, la cual nos indica si el navegador soporta esta funcionalidad: 


if (Modernizr.draganddrop) { 

// Browser supports HTML5 DnD. 

} else { 

// Fallback to a library solution or disable DnD. 

} 

10.2 CREACION DE CONTENIDO ARRASTRABLE 

Hacer que un elemento se pueda arrastrar es muy sencillo. Solo hay que establecer el 
atributo draggabie="true" en el elemento que se quiere mover. La funcion de arrastre 
se puede habilitar practicamente en cualquier elemento, incluidos archivos, imagenes. 
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enlaces, listas u otros nodes DOM. 

<div id= "columns"> 

<div class=" column" draggable="true "><header>A</header></dlv> 
<dlv class=" column" draggable="true "><header>B</header></dlv> 
<dlv class=" column" draggable="true "><header>C</header></dlv> 
</dlv> 


Una ayuda visual al usuario, para indicar que un elemento es arrastable, es transformar 
el aspecto tanto del elemento como del cursor. Con CSS esto es muy sencillo: 


[draggable] { 

user-select: none; 

} 


.column:hover { 

border: 2px dotted #666666; 
background-color: #ccc; 
border-radius: lOpx; 
box-shadow: Inset 0 0 3px #000; 
cursor: move; 


10.3 EVENTOS DE ARRASTRE 

La especificacion define hasta siete eventos que son lanzados tanto per los elementos de 
origen (los que son arrastrados) com para los elementos de destine (donde soltamos el 
elemento arrastrado). Son los siguientes: 

• dragstart: comlenza el arrastrado. El target del evento hace referenda al 
elemento que esta siendo arrastrado. 

• drag: el elemento se ha movido. El target del evento hace referenda al elemento 
que esta siendo arrastrado. Este evento se dispara tantas veces como se mueva el 
elemento. 

• dragenter: se dlspara cuando un elemento que esta siendo arrastrado entra en un 
contenedor. El target del evento hace referenda al elemento contenedor. 

• dragieave: el elemento arrastrado ha salido del contenedor. El target del evento 
hace referenda al elemento contenedor. 

• dragover: el elemento se ha movido dentro del contenedor. El target del evento 
hace referenda al elemento contenedor. Como el comportamiento por defecto es 
denegar el drop, la funcion debe retornar el valor false o llamar al metodo 
preventDefauit del evento para que indicar que se puede el soltar elemento. 

• drop: el elemento arrastrado has sido exitosamente soltado en el elemento 
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contenedor. El target del evento hace referenda al elemento contenedor. 

• dragend: se ha dejado de arrastrar el elemento, con exito o no. El target del 
evento hace referenda al elemento arrastrado. 

Para organizar el flujo de DnD, necesitamos un elemento de origen (en el que se origina 
el movimiento de arrastre), la carga de datos (la informacion que va asociada al 
elemento arrastrado) y un elemento de destine (el area en la que se soltaran los datos). 
El elemento de origen puede ser una imagen, una lista, un enlace, un objeto de archivo, 
un bloque de HTML o cualquier otro elemento, al igual que la zona de destine. 

10.3.1 COMIENZO DE LA OPERACION DE ARRASTRE 

Una vez que se haya definido el atributo draggabie="true" en los elementos que 
queremos convertir en arrastables, debemos ahadir los escuchadores necesarios para 
reaccionar antes los eventos que se lanzan desde los elementos. El primer evento de los 
que define la especificacion se produce cuando un elemento comienza a ser arrastrado. 
Un ejempio muy sencillo en el que cambiamos la transparencia de un elemento al 
comenzar a ser arrastrado: 


function handleDragStart (e) { 

this .style.opacity = '0.4'; 

} 


var cols = document.querySelectorAll (' #columns .column'); 

[].forEach.call (cols , function (col) { 

col.addEventListener( 'dragstart' , handleDragStart, false); 

}) ; 

No debemos olvidarnos de volver a fijar la transparencia del elemento en el 100% una 
vez completada la operacion de arrastre, ya que de otro modo, seguiria siendo 
transparente una vez finalizado la operacion de arrastre. 

10.3.2 DRAGENTER, DRAGOVER Y DRAGLEAVE 

Los controladores de eventos dragenter, dragover y dragleave Se pueden utilizar para 
proporcionar pistas visuales adicionales durante el proceso de arrastre. Por ejempio, el 
borde de un elemento de destine se puede convertir en una Imea discontinua al realizar 
una operacion de arrastre. De esa forma, los usuarios podran distinguir cuales son los 
elementos de destine donde pueden soltar lo que estan arrastrando. 


.column.over { 

border: 2px dashed #000; 

} 


function handleDragStart (e) { 

this .style.opacity = '0.4'; 
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} 

function handleDragOver(e) { 

if (e.preventDefault) { 

e.preventDefault() ; // Necessary. Allows us to drop. 

} 

e.dataTransfer.dropEffect = 'move'; 
return false; 

} 


function handleDragEnter(e) { 

// this / e.target is the current hover target, 
this .classList.add( 'over' ) ; 

} 


function handleDragLeave(e) { 

this .classList.remove (' over ') ; // this / e.target is previous target eleme 

nt. 

} 


var cols = document.querySelectorAll (' #columns .column'); 

[].forEach.call (cols , function (col) { 

col.addEventListener( 'dragstart' , handleDragStart , false); 
col.addEventListener ( 'dragenter' , handleDragEnter, false); 
col.addEventListener (' dragover' , handleDragOver, false); 
col.addEventListener (' dragleave' , handleDragLeave, false); 

}) ; 

Algunas consideraciones en el codigo anterior. Cuando algo es soltado sobre un 
elennento, se dispara el evento dragover, y tenemos la posibilidad de leer el objeto 
event.dataTransfer. Este objeto contiene los datos asociados a las operaciones de 
arrastre, como veremos mas adelante. Tal y como hemos comentado anteriormente, 
cuando soltamos un elemento, hay que impedir el comportamiento predeterminado del 
navegador, que es denegar el drop. 

10.3.3 FINALIZACION DE LA OPERACION DE ARRASTRE 

Para que se procese la operacion de soltar, se debe ahadir un escuchador para los 
eventos drop y dragend. En este controlador, habra que impedir el comportamiento 
predeterminado del navegador para este tipo de operaciones, que puede ser abrir un 
enlace o mostrar una imagen. Para ello, evitamos la propagacion del evento con 

e.stopPropagation(). 

En nuestro ejempio utilizaremos dragend para eliminar la clase over de cada columna: 

function handleDrop(e) { 
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// this / e.target is current target element, 
if (e.stopPropagation) { 

e . stopPropagation() ; // stops the browser from redirecting. 

} 

// See the section on the DataTransfer object, 
return false; 


function handleDragEnd(e) { 

// this/e.target is the source node. 
[].forEach.call (cols , function (col) { 
col.classList.remove( 'over' ) ; 

}) ; 

} 


var cols = document.querySelectorAll (' #columns .column'); 

[].forEach.call (cols , function (col) { 

col.addEventListener( 'dragstart' , handleDragStart , false); 
col.addEventListener( 'dragenter' , handleDragEnter , false); 
col.addEventListener (' dragover' , handleDragOver , false); 
col.addEventListener (' dragleave' , handleDragLeave , false); 
col.addEventListener (' drop' , handleDrop, false); 
col.addEventListener (' dragend' , handleDragEnd, false); 

}) ; 

10.3.4 EL OBJ ETO DATATRANSFER 

La propiedad dataTransfer es el centre de desarrollo de toda la actividad de la funcion 
DnD, ya que contiene los dates que se envian en la accion de arrastre. La prepiedad 
dataTransfer se establece en el evente dragstart y se lee/precesa en el evente drop. 
Al activar e.dataTransfer.setData(format, data) , se establece el centenlde del ebjete 
en el tipe MIME y se transmite la carga de dates en ferma de argumentes. 

En nuestre ejemple, la carga de dates se ha establecide en el prepie HTML del elemente 
de erigen: 


var dragSrcEl = null; 
function handleDragStart (e) { 

this .style.opacity = '0.4'; 
dragSrcEl = this; 

e.dataTransfer.effectAllowed = 'move'; 
e.dataTransfer.setData( 'text/html' , this .innerHTML) ; 

} 

dataTransfer tambien tiene el fermate getData necesarie para la extraccion de les dates 
de arrastre per tipe de MIME. A centinuacion se indica la medificacion necesaria para el 
precesamiente de la accion de arrastre de un elemento: 
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function handleDrop(e) { 

// this/e.target is current target element, 
if (e.stopPropagation) { 

e.stopPropagation() ; // Stops some browsers from redirecting. 


// Don't do anything if dropping the same column we're dragging, 
if (dragSrcEl != this) { 

// Set the source column's HTML to the HTML of the columnwe dropped 


on. 

dragSrcEl.innerHTML = this .innerHTML; 

this .innerHTML = e.dataTransfer.getData( 'text/html' ) ; 


return false; 

} 


Hemos anadido una variable global llamada dragSrcEi para facilitar el cambio de 
posicion de la columna. En handieDragstart (), la propiedad innerHTML de la columna 
de origen se almacena en esa variable y, posteriormente, se lee en handleDrop o para 
cambiar el HTML de las columnas de origen y destine. 

10.4 ARRASTRE DE ARCHIVOS 

Las API de DnD permiten arrastrar archives del escritorio a una aplicacion web en la 
ventana del navegador. 

Para arrastrar un archive desde el escritorio, se deben utilizer los eventos de DnD del 
mismo mode que otros tipos de contenido. La diferencia principal se encuentra en el 
controlador drop. En lugar de utilizer dataTransfer .getData o para acceder a los 
archives, sus dates se encuentran en la propiedad dataTransfer.files: 

function handleDrop(e) { 

e.StopPropagation () ; 

// Stops some browsers from redirecting. 

e.preventDefault() ; 

var files = e.dataTransfer.files ; 

for (var i = 0, f; f = files [i] ; i + + ) { 

// Read the File objects in this FileList. 

} 

} 


Ejercicio 12 
Ver enunciado 

INDICE DE CONTENIDOS 
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HTML5 


Anterior Siguiente 


CAPITULO 11 GEOLOCALIZACION 


El uso del API de geolocalizacion es extremadamente sencillo. Soportado por todos los 
navegadores modernos, nos permite conocer la posicion del usuario con mayor o menor 
precision, segun el metodo de localizacion utilizado. En la actualidad, disponemos de tres 
tecnologias para geolocalizar un usuario: 

• Via IP: todo dispositivo que se encuentra conectado a la red, tiene asignada una 
direccion IP (Internet Protocol) publica que actua, de forma muy simplificada, como 
un codigo postal. Evidentemente, esta no es la mejor manera de localizacion, pero 
SI nos da una ligera idea de donde se encuentra. 

• Redes GSM: cualquier dispositivo que se conecte a una red telefonfa, es capaz de 
obtener una posicion aproximada basandose en una triangulacion con las antenas 
de telefonfa. Es un metodo sensiblemente mas preciso que mediante la direccion IP, 
pero mucho menos que mediante GPS. 

• GPS: Global Positioning System o Sistema de Posicionamiento Global. Es el metodo 
mas preciso, pudiendo concretar la posicion del usuario con un margen de error de 
escasos metros. 

El primer paso es comprobar es la disponibilidad del API de geolocalizacion de HTML 5 en 
el explorador del usuario: 


if (Modernizr.geolocation) { 

alert ('El explorador soporta geolocalizacion'); 

} else { 

alert ('El explorador NO soporta geolocalizacion'); 

} 


El API ofrece los siguientes metodos para geolocalizar la posicion del usuario: 

• getcurrentPosition : obtiene la posIclon actual del usuario, utilizando la mejor 
tecnologfa posible. 

• watchPosition : consulta cada cierto tiempo la posicion del usuario, ejecutando la 
funcion de callback indicada unicamente si la posicion ha cambiado desde la ultima 
consulta. 

Ambos metodos se ejecutan de manera asmcrona para obtener la posicion del usuario. Si 
es la primera vez que se solicita la localizacion al navegador, este mostrara un mensaje 
pidiendo permiso al usuario para compartir su localizacion. Si el usuario no da su 
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permiso, el API llama a la funcion de error que hayamos definido. La especificacion dice: 

"El navegador no debe enviar informacion sobre la localizacion a sitios sin el 
permiso explicito del usuario." 

Asi pues, queda en manos de los navegadores informar al usuario que estamos 
intentando acceder a su posicion actual. La forma de realizarlo depende del navegador. 
Por norma general, los navegadores de escritorio muestran un aviso no bloqueante, lo 
que permite seguir utilizando y ejecutando la aplicacion. 



0 


3 ' 


Figura 11.1 Peticion para compartir localizacion en Chrome 

En cambio, en navegadores de dispositivos moviles, como Safari y Chrome, se muestra 
una ventana modal que bloquea la ejecucion del codigo hasta que el usuario acepte o 
deniegue la solicitud de geolocalizacion. 



Figura 11.2 Peticion para compartir localizacion en Safari Mobile y Chrome Mobile 

11.1 METODOS DEL API 
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El API de geolocalizacion del objeto navigator contiene tres nnetodos: 


• getCurrentPosition 

• watchPosition 

• clearWatch 


Los nnetodos watchPosition y clearWatch estan emparejados, de la misma manera que 
lo estan setlnterval y clearTimeout. watchPosition devuelve un identificador unico, 
que permite cancelar posteriormente las consultas de posicion pasando es identificador 
como parametro a clearWatch. 

Tanto getCurrentPosition como watchPosition, son metodos muy parecldos, y toman 
los mismos parametros: una funcion de exito, una funcion de error y opciones de 
geolocalizacion. Un simple ejempio de uso del API geolocalizacion es el siguiente: 

navigator.geolocation.getCurrentPosition( function (position) { 
alert( 'We found you!' ) ; 

// now do something with the position data 

}) ; 

11.1.1 FUNCION DE EXITO 

Si el usuario permite que el navegador comparta la localizacion, y no se produce ningun 
otro error, se llama a la funcion de exito, que es el primer argumento de las funciones 
de getCurrentPosition y watchPosition. Esta funcion recibe como parametro un objeto 
position que contiene dos propiedades: un objeto coords (contiene las coordenadas) 
una marca de tiempo timestamp. El objeto de coordenadas es el que nos interesa, ya 
que es el que contiene la informacion sobre la geolocalizacion. Sus propiedades son las 
siguientes: 


• readonly attribute double latitude 

• readonly attribute double longitude 

• readonly attribute double accuracy 

La propiedad accuracy contiene la precision de las coordenadas en metros. Podemos 
utilizarlo para mostrar un radio de precision de la posicion en nuestro mapa. 

Aunque es complicado de confirmar, es posible que esta informacion de geolocalizacion 
provenga de servicios propios de los fabricantes. Por ejempio, Google dispone de una 
gran base de datos, que combinado con la informacion de la peticion (como el hardware, 
la direccion IP, etc.) puede dar una localizacion. Esta informacion simplemente 
representa la posicion del usuario, y no contiene nada mas que nos pueda indicar la 
velocidad o direccion del usuario. 
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Utilizando la informacion de posicion, es muy sencillo mostrar la posicion del usuario en 
un mapa: 

if (navigator.geolocation) { 

navigator.geolocation.getCurrentPosition( function (position) { 
var coords = position.coords ; 

showMap(coords.latitude , coords.longitude, coords.accuracy) ; 

}) ; 

} 


Existe otro tipo de dates dentro del objeto coords, para dispositivos que dispongan de 
GPS, aunque la gran mayoria de navegadores estableceran estas propiedades come 

null. 

• readonly attribute double altitude 

• readonly attribute double altitudeAccuracy 

• readonly attribute double heading 

• readonly attribute double speed 


11.1.2 OBTENIENDO DATOS EXTRA 

Actualmente, muchos de los dispositivos integran un GPS. Dependiendo del navegador o 
del sistema operative, la informacion provista con la geolocalizacion puede incluir mucha 
mas informacion que simplemente las coordenadas de la posicion, como la velocidad y la 
altitud. 

En la mayoria de los cases, hay que especificar al API que utilice una mayor precision 
para activar el GPS. Como siempre, hay que tener cuidado al utilizar el GPS, ya que 
consume muchfsima bateria y hay que utilizar esta tecnologia unicamente si es 
estrictamente necesario. 

Para calcular la velocidad, el dispositivo necesita conocer la diferencia media entre las 
ultimas localizaciones. Por esta razon, es necesario utilizar el metodo watchPosition y 
calcular la velocidad de la siguiente manera: 


var speedEl = document.getElementByld('speed') ; 
navigator.geolocation.watchPosition ( function (geodata) { 
var speed = geodata.coords.speed; 
if (speed === null | | speed === 0) { 

speedEl.innerHTML = "You're standing still!"; 

} else { 

// speed is in metres per second 
speedEl.innerHTML = speed + "Mps"; 

} 

} , function () { 
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speedEl.innerHTML = "Unable to determine speed 


{ enableHighAccuracy : true } 

) ; 

11.1.3 FUNCION DE ERROR 

El SSgundO P0r0nn6tro P0r0 los mstodos getCurrentPosltlon y watchPosltlon 6 S I 0 
funcion de error. Est 0 funcion es innport 0 nte si queremos proveer de un segundo metodo 
0 ltern 0 tivo pore introducir I 0 Ioc 0 liz 0 ci 6 n, por ejempio de menere rnonuol, 0 queremos 
informer 0 I usuerio del error. Esta funcion se ejecuta cuando el usuario deniega la 
peticion de localizacion, 0 cuando estamos consultando la posicion pero el dispositivo 
pierde la recepcion de la localizacion. La funcion de error recibe un unico argumento con 
dos propiedades: 

• readonly attribute unsigned short code 

• readonly attribute DOMString message 

El codigo de error puede contener los siguientes valores: 

• PERMISSION_DENIED (valor = 1) 

• POSITION_UNAVAILABLE (valor = 2) 

• TIMEOUT (valor = 3) 

11.1.4 CONFIGURAR LA GEOLOCALIZACION 

Finalmente, el tercer argumento para los metodos getCurrentPosltlon y watchPosltlon 
contiene las opciones de geolocalizacion. Todas estas configuraciones son opcionales, 
puede que no se tengan en cuenta por los navegadores. 

• enableHighAccuracy: booleano, por defectO false 

• timeout: en milisegundos, por defecto infinito 

• maximumAge: en mlllsegundos, por defecto 0 

Por ejempio, para solicitar una alta precision, un timeout de dos segundos y no cachear 
las peticiones, llamamos al metodo getCurrentPosltlon con las siguientes opciones: 


navigator.geolocation.getCurrentPosltlon (success , error, { 
enableHighAccuracy: true 
timeout : 2000 
maximumAge : 0 

}) ; 


Ejercicio 13 
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CAPITULO 12 WEB WORKERS 


Los navegadores ejecutan las aplicaciones en un unico thread, lo que significa que si 
JavaScript esta ejecutando una tarea muy complicada, que se traduce en tiempo de 
procesado, el rendimiento del navegador se ve afectado. Los Web workers se 
introdujeron con la idea de simplificar la ejecucion de threads en el navegador. Un 
worker permite crear un entorno en el que un bloque de codigo JavaScript puede 
ejecutarse de manera paralela sin afectar al thread principal del navegador. Los Web 
workers utilizan un protocolo de paso de mensajes similar a los utilizados en 
programacion paralela. 

Estos Web workers se ejecutan en un subproceso aislado. Como resultado, es necesario 
que el codigo que ejecutan se encuentre en un archivo independiente. Sin embargo, 
antes de hacer esto, lo primero que se tiene que hacer es crear un nuevo objeto Worker 
en la pagina principal: 


var worker = new Worker (' task.js ') ; 

Si el archivo especificado existe, el navegador generara un nuevo subproceso de Worker 
que descargara el archivo J avaScript de forma asmcrona. El Worker no comenzara a 
ejecutarse hasta que el archivo se haya descargado completamente. Si la ruta al nuevo 
Worker devuelve un error 404, el Worker fallara automaticamente. 

Antes de comenzar a utilizar los Worker, es necesario conocer el protocolo de paso de 
mensajes, que tambien es utilizado en otras APIs como WebSocket y Server-Sent Event. 

12.1 TRANSFERENCIA DE MENSAJES 

El API de transferencia de mensajes es una manera muy simple de enviar cadenas de 
caracteres entre un origen (o un dominio) a un destine. Por ejempio podemos utilizarlo 
para enviar informacion a una ventana abierta como popup, o a un iframe dentro de la 
pagina, aun cuando tiene como origen otro dominio. 

La comunicacion entre un Worker y su pagina principal se realize mediante un modelo de 
evento y el metodo postMessage o . En funcion del navegador o de la version, 
postMessage 0 puede aceptar una cadena o un objeto json como argumento unico. Las 
ultimas versiones de los navegadores modernos son compatibles con la transferencia de 
objetos JSON. De todas maneras, siempre podemos utilizar los metodos json. stringify 
y JSON.parse para la transferencia de objetos entre el thread principal y los Worker. 
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A continuacion, se muestra un ejemplo sobre como utilizar una cadena para transferir 
"Hello World" a un Worker en doWork.j s. El Worker simplennente devuelve el mensaje 
que se le transfiere. 

Secuencia de comandos principal: 

worker.postMessage (' Hello World'); // Send data to our worker. 


doWork.j s (el Worker): 


self.addEventLlstener (' message' , function (e) { 

self.postMessage(e.data) ; 

} , false) ; 

Cuando se ejecuta postMessage o desde la pagina principal, el Worker es capaz de 
obtener este mensaje escuchando al evento message. Se puede acceder a los datos del 
mensaje (en este caso "Hello World") a traves de la propiedad data del evento. Aunque 
este ejemplo concreto no es demasiado complejo, demuestra que postMessage() 
tambien sirve para transferir datos de vuelta al thread principal, una vez que los datos 
de origen se hayan procesado correctamente. 

Los mensajes que se transfieren entre el origen y los Worker se copian, no se pasan por 
referenda. Por ejemplo, en el siguiente ejemplo, a la propiedad msg del mensaje json 
se accede en las dos ubicaciones. Parece que el objeto se transfiere directamente al 
Worker aunque se este ejecutando en un espacio especifico e independiente. En 
realidad, lo que ocurre es que el objeto se serialize al transferirlo al Worker y, 
posteriormente, se anula la serializacion en la otra fase del proceso. El origen y el 
Worker no comparten la misma instancia, por lo que el resultado final es la creacion de 
un duplicado en cada transferencia. La mayoria de los navegadores implementan esta 
funcion mediante la codificacion/descodificacion json automatica del valor en la otra 
fase del proceso, cuando el paso de objetos esta soportado. 

En el siguiente ejemplo, que es mas complejo, se transfieren mensajes utilizando objetos 
J avaScript. 

Secuencia de comandos principal: 


<button onclick="sayHI () ">SaY HI</button> 

<button onclick="unknownCmd () ">Send unknown command</button> 
<button onclick="stop () ">Stop worker</button> 

<output id="result "></output> 


<script> 


function sayHI() { 
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worker.postMessage ({' cmd' : 'start', 'msg': 'Hi' }) ; 

} 


function stopO { 

worker.postMessage({'cmd': 'stop', 'msg': 'Bye'}); 

} 


function unknownCmd() { 

worker.postMessage({'cmd': 'foobard', 'msg': '???'}); 

} 


var worker = new Worker('doWork.js'); 


worker.addEventListener('message', function (e) { 

document.getElementByld('result').textContent = e.data; 
}, false); 


</script> 

doWork.js: 

this .addEventListener (' message' , function (e) { 

var data = e.data; 
switch (data.cmd) { 
case 'start' : 

this .postMessage (' WORKER STARTED: 'rdata.msg); 
break; 

case 'stop' : 

this .postMessage (' WORKER STOPPED: ' +data.msg+ '. (buttons will no 
nger work)' ) ; 

this .close() ; // Terminates the worker, 
break; 
default : 

this .postMessage (' Unknown command: '+data.msg); 

}; 

} , false) ; 


12.2 UTILIZACION DE WEB WORKERS 

Un Worker es una manera ejecutar codigo J avaScript de manera paralela al proceso 
principal, sin interferir con el navegador. El navegador sigue siendo responsable de 
solicitar y analizar ficheros, renderizar la vista, ejecutar J avaScript y cualquier otro 
proceso que consuma tiempo de procesado y que haga que el resto de tareas tengan 
que esperar. Y es aquf donde los Web workers toman importancia. 
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Al igual que con el resto de funcionalidades de HTML5, debemos comprobar su 
disponibilidad en el navegador en el que ejecutamos la aplicacion: 


if (Modernizr.webworkers) { 

alert ('El explorador soporta Web workers'); 

} else { 

alert ('El explorador NO soporta Web workers'); 

} 


Crear nuevo Worker es muy sencillo. Tan solo tenemos que crear una nueva instancia del 
objeto Worker , indicando como parametro del constructor el fichero J avaScript que 
contiene el codigo que debe ejecutar el Worker. 

var worker = new Worker (' my_worker.js ') ; 

De esta manera tenemos disponible y listo para utilizar un nuevo Worker. En este 
momento, podriamos pensar que podemos llamar a metodos o utilizar objetos definidos 
dentro del nuevo Worker, pero no nada mas lejos de la realidad. La unica manera de 
comunicarnos con el nuevo Worker es a traves del paso de mensajes, como hemos visto 
anteriormente. 


worker.postMessage( 'Hello World' ) ; 

Este metodo unicamente acepta un parametro, la cadena de texto a enviar al Worker. 
Por otra parte, la manera de recibir mensajes originados en el Worker es definiendo un 
escuchador para el evento message. Los datos incluidos por el Worker se encuentran 
disponibles en la propiedad data del evento. 


worker.addEventLlstener (' message' , function (e) { 

alert(e.data) ; 

} , false) ; 

12.2.1 DENTRO DE UN WORKER 

Evidentemente, dentro de un Worker necesitamos comunicarnos con el thread principal, 
tanto para recibir los datos de los mensajes como para nuevos datos de vuelta. Para 
ello, ahadimos un escuchador para el evento message, y enviamos los datos de vuelta 
utilizando el mismo metodo postMessage. 


this .addEventLlstener (' message' , function (e) { 

postMessage ("I 'm done!"); 

}) ; 

Es conveniente saber, que a diferencia de la ejecucion un script en el documento 
principal, la visibilidad de un Worker es mucho mas reducida. En concrete, la palabra 
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reservada this no hace referencia al objeto window, SinO al Worker en sf mismo. Debido 
al com porta m lento de ejecucion en paralelo de los Web workers, estos solo pueden 
acceder al siguiente conjunto de funciones de JavaScript (segun la especificacion): 

• Enviar datos con postMessage y aceptar mensajes entrantes a traves del evento 

onmessage. 

• close, para terminar con el Worker actual. 

• Realizar peticiones Ajax. 

• Utilizar las funciones de tiempo setTimeout 0/clearTimeout 0 y 

setinterval()/clearinterval(). 

• Las siguientes funciones de J avaScript: ev 1, isNaN, escape, etC. 

• WebSockets . 

• EventSource. 

• Bases de datos Web SQL, IndexedOB. 

• Web Workers. 

En cambio, los Workers NO pueden acceder a las siguientes funciones: 

• DOM (no es seguro para el subproceso). 

• Objeto window. 

• Objeto document. 

• Objeto parent. 

12.3 SUBWORKERS 

Los Workers tienen la capacidad de generar Workers secundarios. Esto significa, que 
podemos dividir la tarea principal en subtareas, y crear nuevos Workers dentro del 
Worker principal. Sin embargo, a la bora de utilizar los Subworkers, y antes de poder 
devolver el resultado final al hilo principal, es necesario asegurarse que todos los 
procesos ban terminado. 

var pendingWorkers = 0, results = {},; 


onmessage = function (event) { 

var data = JSON.parse(event.data), worker = null; 
pendingWorkers = data.length; 


for (var 1=0; i < data.length; i++) { 

worker = new Worker('subworker.js'); 
worker.postMessage(JSON.stringify(data[1])); 
worker.onmessage = storeResult; 
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function storeResult(event) { 

var result = JSON.parse(event.data); 

pendingWorkers—; 
if (pendingWorkers <= 0) { 

postMessage(JSON.stringify(results)); 

} 


12.4 GESTIONAR ERRORES 

Si se produce un error mientras se ejecuta un Worker, se activa un evento e rror . La 
interfaz incluye tres propiedades utiles para descubrir la causa del error: filename (el 
nombre de la secuencia de comandos del Worker que causo el error), iineno (el numero 
de linea donde se produjo el error) y message (una descripcion significativa del error). 

Ejemplo: workerWithError.js intenta ejecutar i/x, donde el valor de x no se ha 
definido: 


<output id="error" style="color: red; "></output> 
<output id="result "></output> 


<script> 


function onError (e) { 

document.getElementByld (' error '). textContent = [ 
'ERROR: Line e.iineno, ' in ' , e.filename. 


} 


e.message] .join( ' ' ) 


function onMsg(e) { 

document.getElementByld('result').textContent = e.data; 

} 


var worker = new Worker('workerWithError.js'); 
worker.addEventListener('message', onMsg, false); 
worker.addEventListener('error', onError, false); 
worker.postMessage0; // Start worker without a message. 

</script> 
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workerWithError.js: 


self.addEventListener (' message' , function (e) { 

postMessage(1/x) ; // Intentional error. 

}; 

12.5 SEGURIDAD 

Debido a las restricciones de seguridad de Google Chrome (otros navegadores no aplican 
esta restriccion), los Workers no se ejecutaran de forma local (por ejempio, desde 
file://) en las ultimas versiones del navegador. En su lugar, fallan de forma 
automatica. Para ejecutar tu aplicacion desde el esquema file://, ejecuta Chrome con 
el conjunto de marcadores — allow-file-access-from-flies. 

Las secuencias de comandos del Worker deben ser archives externos con el mismo 
esquema que su pagina de llamada. Por ello, no se puede cargar una secuencia de 
comandos desde una URL data: o una URL javascript: . Asimismo, una pagina https: 
no puede iniciar secuencias de comandos de Worker que comiencen con una URL http:. 

Ejercicio 14 
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Anterior Siguiente 


CAPITULO 13 WEBSOCKETS 

13.1 INTRODUCCION 

Internet se ha creado en gran parte a partir del llamado paradigma solicitud/respuesta 
de HTTP. Un cliente carga una pagina web, se cierra la conexion y no ocurre nada hasta 
que el usuario hace die en un enlace o envia un formulario. 

Hace ya algun tiempo que existen tecnologias que permiten al servidor enviar datos al 
cliente en el mismo momento que detecta que hay nuevos datos disponibles. Se conocen 
como "Push" 0 "Comet". Uno de los trucos mas comunes para crear la ilusion de una 
conexion iniciada por el servidor se denomina Long Polling. Con el Long Polling, el cliente 
abre una conexion HTTP con el servidor, el cual la mantiene abierta hasta que se envie 
una respuesta. Cada vez que el servidor tenga datos nuevos, enviara la respuesta. El 
Long Polling y otras tecnicas funcionan bastante bien y de hecho ha sido utilizadas en 
muchas aplicaciones como el chat de Gmail. 

Los WebSockets nos ofrecen una conexion bidireccional entre el servidor y el navegador. 
Esta conexion se produce en tiempo real y se mantiene permanentemente abierta hasta 
que se cierre de manera explicita. Esto significa que cuando el servidor quiere enviar 
datos al servidor, el mensaje se traslada inmediatamente. Efectivamente, esto es lo que 
sucedia al utilizar tecnologias como Comet, pero se conseguia utilizando una serie de 
trucos. Si esto no funcionada, siempre era posible utilizar Ajax para conseguir un 
resultado parecido, pero sobrecargando el servidor de manera innecesaria. 

Si disponemos de un socket abierto, el servidor puede enviar datos a todos los clientes 
conectados a ese socket, sin tener que estar constantemente procesando peticiones de 
Ajax. La ventaja en cuanto a rendimiento y escalabilidad es bastante evidente al utilizar 
WebSockets. 

La latencia en las comunicaciones es otro de los beneficios de utilizar WebSockets. Como 
el socket esta siempre abierto y escuchando, los datos son enviados inmediatamente 
desde el servidor al navegador, reduciendo el tiempo al mmimo, en comparacion con un 
paradigma basado en Ajax, donde hay que realizar una peticion, procesar la respuesta y 
enviarla de nuevo de vuelta. 

Finalmente, los datos a transmitir se reducen tambien de manera drastica, pasando de 
un mmimo de 200-300 bytes en peticiones Ajax, a 10-20 bytes utilizando websockets. 

13.2 CREAR UN WEBSOCKET 
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El API de WebSocket es realmente sencillo de utilizar. Actualmente, los navegadores 
unicamente soportan el envfo de cadenas de caracteres, y se realiza de una manera muy 
similar a la que utilizabamos para enviar mensajes en los Web Workers. El API esta 
limitado a metodos para abrir la conexion, enviar y recibir datos y cerrar la conexion. 

Para abrir una conexion webSocket, solo tenemos que ejecutar el constructor WebSocket, 
que toma como parametro la URL del socket a abrir. Hay que tener en cuenta que el 
protocolo a utilizar es ws:// : 


var socket = new WebSocket (' ws://htmlSrocks.websocket.org/tweets ') ; 


Tambien existe un protocolo wss:// para conexiones WebSocket seguras, de la misma 
forma que se utilize https:// para las conexiones http seguras. 

La URL que utilizamos para conectarnos con el WebSocket no tiene por que pertenecer al 
mismo dominio que nuestro documento, por lo que podemos conectarnos a servicios de 
terceros sin problemas, expandiendo las posibilidades de nuestra aplicacion. 

13.3 COMUNICACION CON EL SERVIDOR 

Cuando se establece una conexion con el servidor (cuando el evento open se active), se 
puede empezar a enviar datos al servidor con el metodo send a traves del socket 
creado. 


// Send new Tweet 

socket.send( "Hey there, I'm using WebSockets"); 

De la misma forma, el servidor puede enviarnos mensajes en cualquier momento. Cada 
vez que esto ocurra, se activa el evento onmessage. Los datos enviados por el servidor 
se encuentran en la propiedad data del objeto event. 


socket.onmessage = function (event) { 

var data = JSON.parse(event.data) ; 
if (data.action == 'joined') { 
initiliseChat() ; 

} else { 

showNewMessage(data.who, data.text) ; 


}) ; 

El API incorpora ademas dos eventos que se disparan cuando el socket se abre y esta 
listo, y cuando este se va a cerrar: 

socket.onopen = function (e){ log ("Welcome - status " +this .readyState) ; } ; 

socket.enclose = function (e){ log( "Disconnected - status "+this .readyState) ; }; 
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13.4 WEBSOCKET EN EL SERVIDOR 

Al utilizar los WebSocket, se crea un patron de uso completamente nuevo para las 
aplicaciones de servidor. Aunque las pilas de servidor tradicionales como lamp estan 
disenadas a partir del cicio de solicitud-respuesta de http, a menudo dan problemas si 
hay muchas conexiones webSocket abiertas. Mantener un gran numero de conexiones 
abiertas de forma simultanea requiere una arquitectura capaz de recibir un alto nivel de 
concurrencia sin consumir muchos recursos. Estas arquitecturas suelen estar basadas en 
subprocesos o sistemas de e/s asmcronos. 

En el proximo capitulo sobre Server-Sent Events, veremos una implementacion de un 
servidor web basado en JavaScript, llamado Node.js. 

Ejercicio 15 

Ver enunciado 
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CAPITULO 14 EVENTSOURCE 


Los EventSource (tambien conocidos como Server-Sent Events), son eventos en tiempo 
real transmitidos por el servidor y recibidos en el navegador. Son similares a los 
WebSockets en que suceden el tiempo real, pero son principalmente un metodo de 
comunicacion unidireccional desde el servidor. Al igual que en los WebSocket, creamos 
una nueva conexion indicando la URL, y el navegador intentara conectarse 
inmediatamente. El objeto EventSource dispone de los siguientes eventos: 

• open: se dispara cuando la conexion se ha establecido. 

• message: evento que indica la llegada de un mensaje nuevo. 

• error : se dispara cuando algo ha Ido mal. 

Lo que hace a EventSource diferente es la manera en que controla las perdidas de 
conexion y la gestion de los mensajes. 

Si la conexion se pierde por alguna razon, el API automaticamente trata de volver a 
conectarse. Ademas, al restablecer la conexion, el cliente envfa al servidor la id del 
ultimo mensaje que recibio. Esto permite al servidor, enviar al cliente todos los 
mensajes que no ha podido recibir. No es necesario realizar ninguna configuracion 
especial en nuestro codigo, simplemente el servidor nos enviara los mensajes que no 
hemos recibido. 

Un sencillo ejempio: 


var es = new EventSource ('/bidding'); 


es.onopen = function () { 

initialiseData () ; 

}; 


es.onmessage = function (event) { 

var data = JSON.parse(event.data); 
updateData(data.time , data.bid); 

}; 


14.1 EVENTSOURCE EN EL SERVIDOR 

En el lado del servidor podemos seguir utilizando una solucion basada en PHP y la pila 
completa LAMP, pero como Apache no se comporta de manera estable con conexiones 
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persistentes, constantemente trata de cerrar las conexiones y EventSource trata de 
volver a conectarse automaticamente. Esto da como resultado un comportamlento mas 
parecido a Ajax que a una comunicacion unidireccional y en tiempo real desde el 
servidor. 

Realmente, esta no es la mejor manera de aprovechar las ventajas de EventSource . Para 
ello, necesitamos una conexion persistente con el servidor, y LAMP no nos lo puede 
proporcionar. Actualmente existen soluciones de servidor basadas en eventos, como 
pueden ser Node.js (un servidor basado en JavaScript) o Twisted para Python. 

14.1.1 UN SIMPLE SERVIDOR PARA EVENTSOURCE 

El siguiente codigo muestra como crear un servidor muy simple con Node.js, el cual 
acepta conexiones y envfa mensajes a los clientes conectados. En este caso, unicamente 
se notifica al resto de usuarios conectados al servicio, que un nuevo usuario se ha 
conectado. 

var http = require ('http') ; 

http.createServer( function (req, res) { 

res.writeHead(200, {'Content-Type': 'text/event-stream' , 

'Cache-Control': 'no-cache'}); 

// get the last event id and convert to a number 
var lastid = req.headers ['last-event-id'] *1 ; 
if (lastid) { 

for (var i = lastid; i < eventid; i++) { 

res.write ('data: ' + JSON.stringify(history[eventid]) 

+ '\nid: ' + eventid + '\n'); 



// finally cache the response connection 
connections.push(res) ; 

// When a regular web request is received 
connections.forEach( function (response) { 

history[++eventId] = { agent: req.headers ['user-agent'] , 

time: +new Date ]; 

res.write ('data: ' + JSON.stringify(history[eventid]) 

+ '\nid: ' + eventid + '\n'); 

]) ; 

]).listen(1337, '127.0.0.1'); 

console.log ('Server running at http://127.0.0.1:1337/') ; 

En el lado del cliente, el codigo seria tan sencillo como el siguiente: 

var es = new EventSource ('/eventsource') ; 
es.onmessage = function (event) { 
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var data ^ JSON.parse(event.data) ; 

log.innerHTML += '<li><strong>' + data.agent 

+ '</strong><br> connected at <em>' 

+ (new Date (data.time)) + '</em></li>'; 


Una aplicacion muy simple, pero que nos da una idea del funcionamiento de los eventos 
en tiempo real, utilizando un servidor basado en eventos. 

[NDICE DE CONTENIDOS 
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CAPITULO 15 FILE 


HTML5 ofrece una forma estandar de interactuar con archivos locales a traves de la 
especificacion del API de archivos. El API de archivos se puede utilizar, por ejempio, 
para crear una vista previa en miniatura de imagenes mientras se envian al servidor o 
para permitir que una aplicacion guarde una referencia de un archive mientras el usuario 
se encuentra sin conexion. Tambien se podria utilizar para verificar si el tipo MIME de un 
archive seleccionado por el usuario coincide con los formates de archive permitidos o 
para restringir el tamaho de un fichero, antes de enviarlo al servidor. 

A continuacion se indican las interfaces que ofrece la especificacion para acceder a 
archivos desde un sistema de archivos local: 

• File: representa un archive local y proporciona informacion unicamente de lectura 
(el nombre, el tamaho del archive, el tipo MIME y una referencia al manejador del 
archivo). 

• FiieList: representa un conjunto de objetos File (tanto para un conjunto de 
ficheros seleccionados a traves de <input type="fiie" muitipie> como para un 
conjunto de ficheros arrastrados desde el sistema de ficheros al navegador). 

• Blob: permite fragmentar un archivo en intervales de bytes. 

Cuando se utilize junto con las estructuras de dates anteriores, el API de FiieReader se 
puede utilizar para leer un archivo de forma asincrona mediante el control de eventos de 
JavaScript. Por lo tanto, se puede controlar el progreso de una lectura, detectar si se 
han producido errores y determiner si ha finalizado una carga de un fichero. El modelo 
de evento de FiieReader guarda muchas semejanzas con el API de xMLHttpRequest. 

15.1 DETECCION DE LA FUNGIONALI DAD 

En primer lugar, se debe comprobar que el navegador sea totalmente compatible con el 
API de archivos. Si la aplicacion solo va a utilizar algunas funcionalidades del API, se 
debe modificar este fragmento de codigo para adaptarlo a nuestras necesidades: 

// Check for the various File API support. 

if (window.File && window.FiieReader && window.FiieList && window.Blob) { 

// Great success! All the File APIs are supported. 

} else { 

alert ('The File APIs are not fully supported in this browser.'); 

} 
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15.2 ACCESO A TRAVES DEL FORMULARIO 

La forma mas sencilla de cargar un archive es utilizar un elemento <input type="fiie"> 
estandar de formulario. JavaScript devueive ia iista de objetos File seieccionados como 

un ObjetO FlleLlst . 

A continuacion, se muestra un ejempio en ei que se utiiiza ei atributo multiple para 
permitir ia seieccion simuitanea de varies archives: 

<input tYpe="file" id="files" name="files[]" multiple /> 

<output id="list" ></output> 


function handleFileSelect(e) { 

var files = e.target.files ; // FileList object 

// files is a FileList of File objects. List some properties, 
var output = [ ]; 

for (var i = 0, f; f = files [i]; i++) { 

output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n 
/a', ') - 

f.size, ' bytes, last modified: 

f.lastModifledDate.toLocaleDateString(), '</li>' ); 

} 

list.InnerHTML = '<ul>' + output.join ('') + '</ul>'; 


files.addEventListener('change', handleFileSelect, false); 

15.3 COMO LEER ARCHIVOS 

Despues de obtener una referencia de File, podemos crear una instancia de un objeto 
FileReader para ieer su contenido y aimacenario en memoria. Cuando finaiiza ia carga, 
se ianza ei evento onioad y se puede utiiizar su atributo result para acceder a ios 
dates dei archive. 

A continuacion se indican ias cuatro opciones de iectura asmerona de archivo que inciuye 

FileReader: 

• FileReader.readAsBinaryString (Blob I File) ! ia propiedad result COntendra iOS 

dates dei archivo/objeto blob en forma de cadena binaria. Cada byte se representa 
con un numero entero comprendido entre o y 255, ambos inciuidos. 

• FileReader.readAsText(Blob I File, opt_encoding) ! ia propiedad result COntendra 

ios dates dei archivo/objeto blob en forma de cadena de texto. De forma 
predeterminada, ia cadena se decodifica con ei formate utf-s. Podemos especificar 
un parametro de codificacion opcionai para especificar un formate diferente. 
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• FileReader.readAsDataURL(BlobIFile) : la propledad result COntendra lOS datOS 
del archivo/objeto blob codificados como una URL de dates. 

• FlleReader.readAsArrayBuffer(Blob I File) ! la propledad result COntendra lOS 

dates del archive/ebjete blob ceme un ebjete ArrayBuffer. 

Una vez que se ha activade une de estes metedes de lectura en el ebjete FiieReader, se 
pueden escuchar les eventes onloadstart, onprogress, onload, onabort, onerror y 
onloadend para realizar un seguimiente de su pregrese de lectura. En el ejemple que se 
muestra a centinuacion, ebtenemes las imagenes de les elementes seleccienades per el 
usuarie, leemes su centenide cen reader .readAsOataURL o mestrames una miniatura de 
la imagen: 


<lnput type="flle" ld="flles" name="flies[]" multiple /> 
<output ld="llst "></output> 


function handleFlleSelect(evt) { 

var flies = evt.target.flies ; // FlleLlst object 

// Loop through the FlleLlst and render Image flies as thumbnails, 
for (var 1 = 0, f; f = flies [1]; 1++) { 

// Only process Image flies. 

If (!f.type.match('Image.*')) { 
continue; 

} 


n("); 


var reader = new FlleReader(); 

// Closure to capture the file Information, 
reader.onload = (function (theFlle) { 

return function (e) { 

// Render thumbnail. 

var span = document.createElement('span'); 

span.InnerHTML = ['<lmg class="thumb" src="', e.target.result, 

tltle="', escape(theFlle.name), '"/>'].jol 

list.InsertBefore (span, null); 


}; 

}) (f); 


// Read In the Image file as a data URL. 
reader.readAsDataURL(f); 
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files.addEventListener('change', handleFileSelect, false); 


15.4 FRAGMENTACION DE ARCHIVOS 

En algunos casos, leer el archive complete en memoria no es la mejor opcion. 
Supongamos, per ejempio, que se quiere crear una herramienta de subida de archives 
de forma asincrona. Para acelerar la subida, se podria leer y enviar el archive en 
diferentes fragmentos de bytes. El servidor se encargaria de reconstruir el contenido del 
archive en el orden correcto. 

Afortunadamente, la interfaz File nos proporciona un metodo de fragmentacion de 
ficheros. El metodo utiliza un byte de inicio como primer argumento, un byte de 
finalizacion como segundo argumento. El siguiente ejempio muestra como leer un 
fichero por partes: 


var files = document.getElementByld ('files'). files ; 
if (!files.length) { 

alert ('Please select a file!'); 
return ; 


var file = files [0]; 

var start = 0; 

var stop = flie.size - 1; 

var reader = new FileReader() ; 

reader.onloadend = function (e) { 

if (e.target.readyState == FileReader.DONE) { // DONE == 2 

document.getElementByld ('byte_content' ).textContent = e.target.result ; 
document.getElementByld ('byte_range' ).textContent = 

['Read bytes: ', start +1, ' - stop + 1, 

' of ', file.size, ' byte flie']. join (''); 


}; 


if (flie.webkitSlice) { 

var blob = file.webkitSlice(start , stop + 1); 
} else if (flie.mozSlice) { 

var blob = file.mozSlice(start , stop + 1); 

} 

reader.readAsBinaryString(blob) ; 
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CAPITULO 16 HISTORY 


El API history de HTML es la manera estandar de manipular el historial de navegacion a 
traves de J avaScript. Partes de esta API ya se encontraban disponibles en versiones 
anteriores de HTML. Ahora, HTML5 incluye una nueva manera de anadir entradas al 
historial de navegacion, modificando la URL pero sin actualizar la pagina actual, y 
eventos que se disparan cuando el usuario a eliminado estas entradas, pulsando el 
boton de volver del navegador. Esto quiere decir que la barra de direcciones sigue 
funcionando de la misma manera, identificando los recursos de manera unica, aun 
cuando las aplicaciones hacen un uso intensivo de JavaScript sin recargar la pagina. 

Como sabemos, una URL representa un recurso unico. Podemos enlazarlo directamente, 
almacenarlo como favorito, los motores de busqueda pueden analizar su contenido, 
podemos copiarlo y enviarlo por email... La URL realmente importa. 

Asf pues, lo que queremos es que contenidos unices dispongan de una URL unica. Hasta 
ahora, el comportamiento normal de los navegadores recargar de nuevo la pagina si 
modificabamos la URL, realizando una nueva peticion y obteniendo de nuevo todos los 
recursos del servidor. No habia manera de decir al navegador que cambiase la URL pero 
descargase unicamente la mitad de la pagina. El API history de HTML5 permite 
precisamente esto. En lugar de solicitar la carga de toda la pagina, podemos utilizer 
JavaScript para cargar unicamente los contenidos que deseemos. 

La idea es la siguiente. Imaginemos que tenemos una pagina A y otra pagina B, que 
comparten el 90% de su contenido. Cuando un usuario se encuentra en la pagina A, y 
quiere navegar a la B, lo normal es realizar una peticion complete. En lugar de realizar 
esta peticion, interrumpimos esta navegacion y realizamos los siguientes pasos de 
manera manual: 

1. Cargar el 10% de contenido diferente de la pagina B, a traves de algun metodo 
como AJAX. 

2. Cambiar el contenido, utilizando innerHTML u otros metodos del DOM. Es posible 
que tengamos que reiniciar los eventos asociados a los elementos. 

3. Actualizamos la URL del navegador, indicando la direccion de la pagina B, utilizando 
el API history de HTML5. 

Tras realizar estos pasos, disponemos de un DOM exacto al de la pagina B, como si 
hubiesemos navegado hasta ella, pero sin realizar una peticion complete. 
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16.1 API 

El API de HTML4 ya inclufa algunos metodos basicos para movernos a traves del historial 

de navegacion, COmO eran history.back();, history, forward () y history.go(n) . Sin 

embargo, estos metodos no permitian modificar la pila del historial, por lo que no eran 
de gran utilidad. HTML5 ha introducido dos nuevos metodos que nos permiten ahadir y 
modificar las entradas del historial, concretamente history .pushstate o y 
history.repiacestate () . Ademas de estos metodos, se ha ahadido tambien un evento 
window.onpopstate , que es lanzado cada vez que alguna de las entradas de history 
Gambia. 

16.1.1 METODO PUSHSTATE 0 

Supongamos que estamos visitando http:// WWW .arkaltzgarro.com/html5/Index.html y 

a traves de un script realizamos la siguiente operacion: 

var stateObj = { foo: "bar" }; 

history.pushstate(stateObj , "Demos", "demos.html"); 

Esto va a provocar que en la barra de direcciones se muestre 

http://www.arkaitzgarro.com/htmi5/demos.htmi, pero el navegador no va a cargar 
demos.html nl va a comprobar su existencia. En este punto, si navegamos a otra pagina 
COmO http://www.google.es/, y despues presionamos el boton de volver, en la URL se 
mostrara http://www.arkaitzgarro.com/htmi5/demos.htmi y la pagina lanzara el evento 
popstate, donde el estado contiene una copia de stateOb j. La pagina que se mostrara 
sera index.htmi, pero deberemos realizar un trabajo extra al lanzarse el evento para 
mostrar el contenido correcto. 

El metodo pushstate 0 toma tres parametros: un objeto de estado, un titulo y una URL: 

• El objeto de estado: es un objeto de JavaScript asociado con la nueva entrada del 
historial creada con pushstate o . Cada vez que el usuario navega al estado creado, 
el evento popstate es disparado, y la propiedad state del evento contiene una 
copia de este objeto. Este objeto puede representar cualquier que se pueda 
serializar. Como este objeto se almacena en el disco, es posible recuperarlo aunque 
el navegador se cierre. Los navegadores imponen un Ifmite de tamaho a la hora de 
almacenar estados (en el caso de Firefox 640 kb). Si se necesita mas espacio, es 

reCOmendable utilizer sesslonStorage O locaistorage . 

• El tftulo: representa el nuevo titulo de la pagina a la que navegamos. 

• La nueva URL: corresponde con la nueva URL que se ahade al historial de 
navegacion. Esta URL puede ser absolute o relative, la unica restriccion es que 
corresponde al dominio del documento actual. Si no se especifica este parametro, la 
URL corresponde con el documento actual. 
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En esencia, ejecutar el metodo pushstate () es similar a definir window.location = 
"#foo" , ya que en ambos cases se crea y activa una nueva entrada en el historial 
asociada con el documento actual. Pero pushstate o ofrece las siguientes ventajas: 

• La nueva URL puede ser cualquier URL dentro del dominie actual. En cambio, 

window.location = "#foo" se mantlene siempre en el documento actual. 

• No es necesario cambiar la URL actual para anadir una nueva entrada y almacenar 
datos asociados. 

• Podemos asociar datos a una nueva entrada en el historial. Con el enfoque basado 
en hash (#), los datos tenemos que ahadirlos a la URL. 

16.1.2 METODO replacestate () 

El metodo history.repiacestate o funclona de manera similar a history.pushstate o , 

a excepcion de que repiacestate o modifica la entrada actual del historial, en lugar de 
anadir una nueva. Este metodo es util cuando queremos actualizar el objeto de estado 
de la entrada actual en respuesta a una accion del usuario. 

16.1.3 EVENTO popstate 

El evento popstate es lanzado cada vez que la entrada actual del historial cambia por 
otra entrada existente en el mismo documento. Si la entrada del historial que esta 
siendo activada fue creada a traves de history .pushstate o o se modified con 
history . repiacestate () , el evento popstate reclbe como parametro una copia del 
estado de la entrada del historial. 

Este evento no se lanza cuando se llama a history .pushstate o o 
history.repiacestate 0 . Unlcamente se dlspara realizando una accion en el navegador 
como pulsando el botdn atras o ejecutando history.back () en JavaScript. Un ejempio 
de este comportamiento: 


window.onpopstate = function (event) { 

alert(document.location + ", state: " + JSON.stringify(event.state)) ; 

}; 


history.pushstate ({page : 1}, "title 1", "?page=l"); 

history.pushstate({page : 2}, "title 2", "?page=2"); 

history.repiacestate({page : 3}, "title 3", "?page=3"); 

// alerts "http://example.com/index.html?page=l, state: {"page":!} 
history.back() ; 

// alerts "http://example.com/index.html, state: null 
history.back () ; 

// alerts "http://example.com/index.html?page=3, state: {"page":3} 
history.go(2) ; 


http://www.arkaitzgarro.com/htnil5/capitulo-16.htnil[ 13/07/2015 12:02:58] 


History I HTML5 


Cuando la pagina se carga, por ejempio al reiniciar el navegador, tango Chrome como 
Safari lanzan el evento popstate, pero no es el caso de Firefox. Sin embargo, en este 
caso, es posible acceder a los datos almacenados en pushstate desde la propiedad 
state del objeto history. 


window.onload = function () { 

var currentState = history.state ; 

} 


[NDICE DE CONTENIDOS 

History 

16.1 API 
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CAPITULO 17 XMLHTTPREQUEST2 


XMLHttpRequest forma parte de las mejoras incrementales que los creadores de 
navegadores estan implementando a la plataforma base. 

XMLHttpRequest de nivel 2 introduce una gran cantidad de nuevas funciones que ponen 
fin a los problemas de nuestras aplicaciones web, como solicitudes de origen cruzado, 
eventos de progreso de subidas y compatibilidad con subida/bajada de datos binaries. 
Esto permite a AJAX trabajar en coordinacion con muchas de las API HTML5 mas 
punteras, como API de FileSystem, el API de Web Audio y WebGL. 

17.1 RECUPERACION DE ARCHIVOS 

Recuperar archives como blob binario era muy complicado con xhr. Tecnicamente, no 
era ni siquiera posible. Un truce que se ha documentado mucho implicaba anular el tipo 
mime con un conjunto de caracteres definido per el usuario, como se muestra a 
continuacion. 

La antigua forma de recuperar una imagen: 


var xhr = new XMLHttpRequest() ; 

xhr.open('GET', '/path/to/image.png', true); 


// Hack to pass bytes through unprocessed. 

xhr.overrideMimeType('text/plain; charset=x-user-defined'); 


xhr.onreadystatechange = function(e) { 

if (this.readyState == 4 && this.status == 200) { 

var binStr = this.responseText; 

for (var i = 0, len = binStr.length; i < len; ++i) { 

var c = binStr.charCodeAt(i) ; 

//String.fromCharCode(c & Oxff); 

var byte = c & Oxff; // byte at offset i 


xhr.send(); 

Aunque funciona, lo que se obtiene realmente en responseText no es un blob binario. 
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sino una cadena binaria que representa el archive de imagen. Estamos engahando al 
servidor para que devuelva los dates sin precesar. 

17.2 ESPECIFICACION DE UN FORMATO DE RESPUESTA 

En lugar de realizar la accion del ejemple anterier, vames a aprevechar las nuevas 
prepiedades de XMLHttpRequest ( responseType y response) para indicar al navegader 
el fermate en el que queremes que nes devuelva les dates. 

• xhr.responseType : antes de envlar una selicitud, establece xhr.responseType en 
text, arraybuffer, blob e document, en funclon de les dates que necesites. Ten 
en cuenta que si se establece xhr .responseType = '' (e si se emite), se utilizara la 
respuesta predeterminada text. 

• xhr.response : despues de una selicitud cerrecta, la prepiedad response de xhr 
centendra les dates selicitades ceme DOMString, ArrayBuffer, Blob e Document 
(en funclon del valor establecido para responseType). 

Con esto, podemos recuperar la imagen come ArrayBuffer en lugar de como una 
cadena. Al transferir el bufer al API BiobBuiider se crea un Blob: 

BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobB 
uilder; 


var xhr = new XMLHttpRequest() ; 

xhr.open('GET', '/path/to/image.png', true); 

xhr.responseType = 'arraybuffer'; 


xhr.onload = function(e) { 

if (this.status == 200) { 

var bb = new BlobBuilder(); 

bb.append(this.response); // Note: not xhr.responseText 
var blob = bb.getBlob('image/png') ; 


xhr.send(); 

Si se quiere trabajar directamente con un Blob o no se necesita manipular ni un solo 
byte del archive, utilizaremos xhr : 


responseType='blob': 

window.URL = window.URL || window.webkitURL; // Take care of vendor prefixes. 
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var xhr = new XMLHttpRequest() ; 

xhr.open('GET', '/path/to/image.png', true); 

xhr.responseType = 'blob'; 

xhr.onload = function(e) { 

if (this.status == 200) { 

var blob = this.response; 

var img = document.createElement('img'); 
img.onload = function(e) { 

window.URL.revokeObjectURL(img.src); // Clean up after yourself. 

}; 

img.src = window.URL.createObjectURL(blob); 
document.body.appendChild(img) ; 



xhr.send(); 


17.3 ENV(0 DE DATOS 

Durante algun tiempo, XMLHttpRequest nos ha limitado a enviar datos ooMstring o 
Document (XML). Pero eso se acabo. Se ha anulado un metodo sendo y redisehado para 
aceptar todos estos tipos: DOMString, Document, FormData, Blob, File y ArrayBuffer. 

• Envio de la cadena de datos: xhr.send(domstring) 

sendText('test string'); function sendTextNew(txt) { 

var xhr = new XMLHttpRequest() ; 
xhr.open('POST', '/server', true); 
xhr.responseType = 'text'; 
xhr.onload = function(e) { 

if (this.status == 200) { 

console.log(this.response); 


xhr.send(txt); 

} 


sendText2('test string'); 

• Envio de formularies: xhr.send(formdata) 
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function sendForm() { 

var formData = new FormData(); 
formData.append('username', 'johndoe'); 

formData.append('id' , 123456); 

var xhr = new XMLHttpRequest() ; 
xhr.open('POST', '/server', true); 
xhr.onload = function(e) { ... }; 


xhr.send(formData) ; 

} 

Por supuesto, no es necesario crear un objeto <form> desde cero. Los objetos FormData 
se pueden inicializar a partir de un elemento HTMLFormEiement de la pagina. Por 
ejempio: 

<form id="myform" name="myform" action="/server"> 

<input type="text" name="username" value="johndoe"> 

<input type="number" name="id" value="123456"> 

<input type="submit" onclick="return sendForm(this.form);"> 

</f orm> 

function sendForm(form) { 

var formData = new FormData(form); 

formData.append('secret_token', '1234567890'); 

var xhr = new XMLHttpRequest() ; 

xhr.open('POST', form.action, true); 

xhr.onload = function(e) { ... }; 


xhr.send(formData) ; 


return false; // Prevent page from submitting. 

} 


Un formulario HTML puede incluir subidas de archivos (como <input type="fiie">) y 
FormData tambien. Sinnplemente se anade el archive o los archivos y el navegador 
construira una solicitud multipart/form-data cuando se ejecute sendo : 

function uploadFiles(url, files) { 
var formData = new FormData(); 


for (var i = 0, file; file = files [i]; ++i) { 

formData.append(file.name, file); 
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} 

var xhr = new XMLHttpRequest() ; 
xhr.open('POST', url, true); 
xhr.onload = function (e) { ... }; 

xhr.send(formData); // multipart/form-data 


document.querySelector('input[type="file"]').addEventListener('change', functio 
n (e) { 

uploadFiles('/server' , this.files) ; 

}, false); 


17.4 SUBIDA DE ARCHIVOS O BLOB 

Tambien podemos enviar datos de File o Biob con xhr. 

En este ejemplo se crea un texto nuevo desde cero con el API lobBuilder y se sube 
eseBlob' al servidor. El codigo tambien configura un controlador para informar al 
usuario sobre el progreso de la subida: 


function upload(blobOrFile) { 

var xhr = new XMLHttpRequest() ; 
xhr.open('POST' , '/server', true); 
xhr.onload = function (e) { ... }; 

// Listen to the upload progress. 

var progressBar = document.querySelector('progress') ; 
xhr.upload.onprogress = function(e) { 

if (e. lengthComputable) { 

progressBar.value = (e.loaded / e.total) * 100; 

progressBar.textContent = progressBar.value; // Fallback for unsupp 
orted browsers. 


xhr.send(blobOrFile); 

} 


// Take care of vendor prefixes. BlobBuilder = window.MozBIobBuilder || 
window.WebKitBlobBuilder || window.BlobBuilder; 

var bb = new BlobBuilder(); 
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bb.append('hello world'); 

upload(bb.getBlob('text/plain')) ; 


17.5 SUBIDA DE UN FRAGMENTO DE BYTES 

Y por ultimo, podemos enviar ArrayBuffer como la carga de XHR. 

function sendArrayBuffer() { 

var xhr = new XMLHttpRequest() ; 
xhr.open('POST', '/server', true); 
xhr.onload = function(e) { ... }; 


var uIntSArray = new UintSArray([1, 2, 3]); 

xhr.send(uIntSArray.buffer) ; 

} 


17.6 EJEMPLOS PRACTICOS 

17.6.1 COMO DESCARGAR Y GUARDAR ARCHIVOS EN EL SISTEMA 
DE ARCHIVOS HTML5 

Supongamos que tienes una galena de imagenes y quieres recuperar un grupo de 
imagenes para, a continuacion, guardarlas localmente con el sistema de archives 
HTML5. Una forma de conseguir esto seria solicitar imagenes como ArrayBuffer, crear 
un Blob a partir de los dates y escribir el blob con Fiiewriter: 

window.requestFlleSystem = window.requestFileSystem || window.webkitRequestFil 
eSystem; 


function onError(e) { 

console.log('Error' , e) ; 

} 


var xhr = new XMLHttpRequest() ; 

xhr.open('GET', '/path/to/image.png', true); 

xhr.responseType = 'arraybuffer' ; 


xhr.onload = function(e) { 


window.requestFileSystem(TEMPORARY, 1024 * 1024, 
fs.root.getFile('image.png', {create: true}, 
flleEntry.createWriter(function(writer) 


function(fs) { 

function(fileEntry) { 
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writer.onwrite = function(e) { ... }; 
writer.onerror = function(e) { ... }; 

var bb = new BlobBuilder(); 
bb.append(xhr.response); 

writer.write(bb.getBlob('image/png ' ) ) ; 

}, onError); 

}, onError); 

}, onError); 

}; 


xhr.send() ; 

17.6.2 COMO Dl VI Dl R UN ARCHI VO Y SUBI R CADA FRAGMENTO 

Con las API de archivo, podemos mininnizar el trabajo necesario para subir un archivo de 
gran tamano. La tecnica es dividir el archivo que se va a subir en varios fragmentos, 
crear un xhr para cada parte y unir los fragmentos en el servidor. Es similar a la forma 
en que Gmail sube archives adjuntos tan grandes en tan poco tiempo. 

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || 

window.BlobBuilder; 


function upload(blobOrFile) { 

var xhr = new XMLHttpRequest() ; 
xhr.open('POST' , '/server', true); 
xhr.onload = function (e) { ... }; 

xhr.send(blobOrFile); 

} 


document.querySelector('input[type="file"]').addEventListener('change', functio 
n (e) { 

var blob = this.files [0]; 

const BYTES_PER_CHUNK = 1024 * 1024; // IMB chunk sizes, 
const SIZE = blob.size; 

var start = 0; 

var end = BYTES_PER_CHUNK; 

while(start < SIZE) { 
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if ('mozSlice' in blob) { 

var chunk = blob.mozSlice(start, end); 

} else { 

var chunk = blob.webkitSlice (start, end); 

} 


upload(chunk); 

start = end; 

end = start + BYTES_PER_CHUNK; 

} 

}, false); 

}) 0 ; 
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HTML5 


CAPITULO 18 EJERCICIOS 

18.1 CAPITULO 2 

18.1.1 EJERCICIO 1 

Dada la siguiente pagina web, estructurada en XHTML, aplicar las nuevas etiquetas 
semanticas de HTML5 donde sea conveniente, manteniendo el mismo aspecto visual 
(modificar la hoja de estilos si es necesario) y funcionalidad. Realizad tambien los 
cambios necesarios en la cabecera del documento (elemento <head>). 

Descargar pagina web. 

18.2 CAPITULO 3 

18.2.1 EJERCICIO 2 

Crear un formulario que contenga lo siguiente: 

• Los 12 nuevos tipos de elementos input. 

• El nuevo elemento dataiist, que contenga algunos nombres de provincia y un 
campo de texto que se relacione con el. 

• Una caja de texto ( <input type="text">), a la cual aplicar los atributos autofocus, 

placeholder, required y autocomplete. 

• Una caja de texto que solo pueda contener numeros ( <i nput type="number">), 
cuyos valores tienen que estar comprendidos entre 0 y 10. 

• Un campo de seleccion de ficheros ( <input type="fiie"> ), al que aplicar el atributo 

multiple. 

• Un campo de introduccion de password (<input type="password">), donde el valor 
introducido debe cumplir lo siguiente: debe tener una longitud minima de 8 
caracteres, comenzar por un numero y terminar en una letra mayuscula. 

• Un nuevo elemento progress que represente el avance de completado de campos 
del formulario. 

Acceder al formulario desde al menos 4 navegadores (2 de escritorio y 2 de dispositivos 
moviles), y comprobad el comportamiento y funcionamiento en cada elemento del 
formulario. Anotad dichos resultados en una hoja de calculo para futuras referencias. 
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18.3 CAPITULO 4 

18.3.1 EJERCICIO 3 

Identificar las siguientes caracteristicas de al menos 4 navegadores (2 de escritorio y 2 
de dispositivos moviles): 

• Cuales de los 12 nuevos tipos de input soporta el navegador. 

• Que codecs de reproduccion de video soporta cada navegador. 

• Que sistenna(s) de almacenamiento local soporta cada navegador. 

18.3.2 EJERCICIO 4 

Identificar si el navegador soporta el atributo placeholder. En caso de no soportar dicha 
funcionalidad, cargar el polyfill correspondiente para anadir dicha funcionalidad al 
navegador. 

18.4 CAPITULO 5 

18.4.1 EJERCICIO 5 

A partir del siguiente HTML, realizar los siguientes pasos: 


<ul> 

<11 class="user" data-name= "Arkaitz Garro" data-citY="Donostia" 
data-lang="es " data-food="Txuleta">Arkaitz Garro</li> 

<11 class="user" data-name= "John Doe" data-city="Boston" 
data-lang="en" data-food="Bacon"> John Doe</li> 

<11 class="user" data-name= "Divya Resig" data-city="Tokyo" 

data-lang=" jp" data-food="Sushi" data-delete="true">Divya Resig</li> 

</ul> 


• Obtener cada uno de los atributos data- de los elementos de la lista, y mostrarlos 

por consola. 

• Modificar el idioma es por es_Es. 

• Eliminar los elementos de la lista cuyo atributo data-deiete sea true. 

18.5 CAPITULO 6 

18.5.1 EJERCICIO 6 

Crear un reproductor de video que cumple las siguientes caracteristicas: 

• Reproducir los videos independientemente del codec soportado por el navegador. 

• Incluir controles de reproduccion, pausa, parar, avanzar y retroceder 10 segundos, 
inicio y fin. 
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• Control de volumen y paso a pantalla completa. 

• Un indicador de progreso de la reproduccion. 

Anadir una lista de reproduccion que permita seleccionar un nuevo video, y este se 
reproduzca sin recargar la pagina. 


0 O O Reproductor de video k* 



Iniciar Pausa Parar Avanzar Retroceder Inicio Fin Pantalla completa 


[ Mostrar un menu 

Figura 18.1 Aspecto final del reproductor 

18.6 CAPITULO 7 

18.6.1 EJERCICIO 7 

Dibujar sobre un elemento canvas, un stickman con un aspecto final similar al que se 
muestra a continuacion. Seguir las siguiente indicaciones como ayuda: 

• El tamano inicial del canvas es de 200 px del ancho y aoopxde alto. 

• Utilizar un rectangulo negro para pintar todo el fondo del canvas. 

• Dibujar la cabeza con un arco completo, en las coordenadas ( loo, so ), y un radio de 

3 Opx. 

• La sonrisa corresponde con un semiarco rojo (#c 00 ), con inicio de coordenadas 
( 100,50 ) y un radio de 2 0 px. 

• Los ojos son dos circunferencias rojas situadas en las coordenadas ( 90 , 45 ) y 
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(110,45) y de radio 3px. 


0 n O Ejercicio canvas 
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Figura 18.2 Resultado final del stickman 

18.7 CAPITULO 8 

18.7.1 EJERCICIO 8 

I mplementad las siguientes funcionalidades utilizando sessionstorage y Locaistorage: 

• Crear una caja de texto, a modo de editor de contenidos, y utilizando 

Sessionstorage almacenar el contenido de la caja en cada pulsacion de tecla. Si la 
pagina es recargada, el ultimo contenido almacenado debe mostrarse en la caja de 
texto. Comprobad que cerrando la pestana actual, o abriendo una nueva ventana, 
los datos no se comparten. 

• Modificar el codigo anterior para utilizar Locaistorage. Comprobad que en este 
caso, aunque cierre la ventana o abra una nueva, los datos se mantienen. Anadir la 
posibilidad de actualizar el resto de ventanas abiertas, cada vez que se modifique el 
valor de la caja de texto en cualquiera de ellas. 

18.7.2 EJERCICIO 9 

Crear un objeto que encapsule una base de datos WebSQL, que nos permitar acceder a 
una base de datos para anadir, modificar, eliminar y obtener registros. Dicha base de 
datos va a almacenar tweets procedentes de Twitter, que tienen asociado el hashtag 
#html5. Los requisitos son los siguientes: 
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• Disponer de una tabla para almacenar los tweets. Los campos mfnimos son: 
identificador del tweet, texto, usuario, y fecha de publicacion. 

• Disponer de una tabla para almacenar los usuarios que publican los tweets. Esta 
tabla debe estar relacionada con la anterior. Los campos mmimos son: identificador 
del usuario, nombre e imagen. 

• Crear un metodo addTweet que dado un objeto que corresponde con un tweet, lo 
almacene en la base de datos. Almacenar el usuario en caso de que no exista, o 
relacionarlo con el tweet si existe. 

• Crear un metodo removeTweet que dado un identificador de tweet, lo elimine de la 
base de datos. Este metodo debe devolver el tweet eliminado. 

• Crear un metodo updateTweet que dado un objeto que corresponde con un tweet, 
actualice los datos correspondientes al tweet en la base de datos. 

• Crear un metodo getTweets que dado un parametro de fecha, me devuelva todos 
los tweets posteriores a esa fecha. Cada tweet debe incluir sus datos completos y el 
usuario que lo creo. 

Obtener los ultimos 25 tweets que tienen como hashtag #html5 de la siguiente consulta 
a Twitter: http://search.twitter.com/search.json? 
q=%23html5&rpp=25&result_type="recent" 

Consultad la API de Twitter para identificar el formato del resultado, nombres de campos, 
etc. 

18.7.3 EJERCICIO 10 

Crear un objeto que encapsule una base de datos IndexedDB, que nos permitar acceder 
a una base de datos para ahadir, modificar, eliminar y obtener registros. Dicha base de 
datos va a almacenar una sencilla lista de tareas pendientes. Los requisitos son los 
siguientes: 

• Disponer de un almacen de tareas pendientes. Sus propiedades son: un identificador 
unico que actua como fndice, el texto descriptivo, una propiedad que nos indique si 
la tarea esta completada o no y la fecha/hora de creacion. 

• Crear un metodo addTask que dado un objeto que corresponde con una tarea, lo 
almacene en la base de datos. 

• Crear un metodo removeTask que dado un identificador de una tarea, lo elimine de 
la base de datos. Este metodo debe devolver la eliminada. 

• Crear un metodo updateTask que dado un identificador de una tarea, actualice los 
datos correspondientes a la tarea en la base de datos. 

• Crear un metodo getTasks que dado un parametro booelano completado, nos 
devuelva las tareas que se encuentran completadas o no. 
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18.8 CAPITULO 9 

18.8.1 EJERCICIO 11 

Cread una pagina HTML que muestre la hora local de vuestro ordenador, y la hora del 
servidor de www.google.es. Los calculos de hora local y obtencion de hora del servidor, 
deben crearse en ficheros separados. El comportamiento es el siguiente: 

• Todos los ficheros necesarios para realizar el ejercicio deben ser cacheados, a 

excepcion del javascript que solicita la peticion al servidor. 

• Las peticiones de hora al servidor www.google.es se realizan a traves de Ajax, en 
intervalos de 1 segundo. Dichas peticiones no deben realizarse si no existe 
conexion. En tal caso, se muestra un mensaje al usuario indicando que se ha 
perdido la conexion. 

• Si se recarga la pagina, y no existe conexion, utilizar un fallback para la obtencion 
de la hora del servidor, que muestre un mensaje al usuario indicando que se ha 
perdido la conexion. 

0 O O Mihoraylahoraenwww.google.es jc' 


La hora en mi dispositivo es 13:05:55 y la hora en www.google.es es 10:30:48 


[ Mostrar un menu _ J 

Figura 18.3 Resultado del ejercicio con conexion 


eon 


Mi hora y la hora en www.google.es 


t£ 


La hora en mi dispositivo es 13:07:41 y no hay conexidn con el servidor 


1 Mostrar un menu _ J 

Figura 18.4 Resultado del ejercicio sin conexion 

Utilized el siguiente codigo para obtener la hora de un servidor: 


function srvTime(url){ 
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var xmlHttp = new XMLHttpRequest() ; 
xmlHttp.open( 'HEAD' , url, false) ; 

xmlHttp.setRequestHeader( "Content-Type" , "text/html" ) ; 
xmlHttp.send (null ) ; 

return xmlHttp.getResponseHeader( "Date" ) ; 


var st = srvTlme( "https://www.google.es/") ; 
var date = new Date(st); 

18.9 CAPITULO 10 

18.9.1 EJERCICIO 12 

Implementar un carrito de la compra que permita arrastrar los productos a la cesta, y 
calcule el precio total de la compra. El proceso es el siguiente: 

• Al pasar con el raton sobre una imagen, el puntero cambia de aspecto (cursor: 

move; ) y se permite arrastrar el contenido. 

• Al arrastrar el elemento, la zona que contiene la cesta de la compra se ilumina. 

• Al soltar la imagen sobre la cesta de la compra, anade el producto si no existia, 

mostrando la imagen, el nombre del producto, la cantidad de productos en la cesta 
(en este caso 1) y el coste total para ese producto. 

• Al soltar la imagen sobre la cesta de la compra, si el producto ya se encontraba en 

la cesta, actualiza la cantidad de productos y su precio. 

Posibles mejoras para este ejercicio: 

• Anadir la posibilidad de eliminar los productos de la cesta de la compra, 

arrastrandolos desde la propia cesta y soltandolos en cualquier parte de la pagina. 
En este caso, mostrariamos un mensaje de confirmacion de eliminacion del 
producto. 

• Mantener una persistencia de datos para la cesta de la compra, que el actualizar la 
pagina no se pierdan los productos introducidos. 

Descargar sitio web. 
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0 O O Carro de la compra 

Carro de la compra 





EAU DU SOIR 


LOVE IN BLACK COUEUR DE FLEUR 


SISLEY 

EDP lOOML 174.80€ 


CREED 

75ML 17Z.<K)€ 


MILLER HARRIS 
EDP 100ML84.00€ 



GERANIUM BOURBON 
MILLER HARRIS 
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OSMANTHUS 
ORMONDE JAYNE 


FRANGIPANI 
ORMONDE JAYNE 


Figura 18.5 Aspecto inicial de la cesta de la compra 

18.10 CAPITULO 11 



FLEUR ORIENTAL 
MILLER HARRIS 

EDP lOOML 04.006 



SAMPAQUITA 
ORMONDE JAYNE 

^j 


18.10.1 EJERCICIO 13 

Utilizando los servicios de geolocalizacion, realizar las siguientes tareas: 

• Solicitar las coordenadas actuales, y mostrar dichas coordenadas (y la precision) 
tanto en formato texto como un punto en el mapa. 

• Haciendo uso del entorno de desarrollo de Android (emulador y SDK) y la 
herramienta DDMS, indicar al dispositive una posicion GPS concreta. 
Posteriormente, modificar la implementacion para solicitar continuamente la 
posicion del dispositive. En la herramienta DDMS, utilizar el fichero de rutas GPX 
que se proporciona y mostrar cada nuevo punto en el mapa. 

Descargar sitio web. 
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0^0 Ceolocalizacion 


Geolocalizacion 


Tu localizaci6n: encontrado. 
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Figura 18.6 Posicion actual en el mapa 

18.11 CAPITULO 12 

18.11.1 EJERCICIO 14 

Crear un Web worker que dado un numero entero, calcule todos los numeros primos 
comprendidos entre 1 y dicho numero. 

Proporcionaremos a este Worker un numero entero, y devolvera un array con todos los 
numeros primos encontrados. Mostrar el listado de numeros primos en el documento 
principal. 
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0 n O WebWorkers 

WebWorkers 


Introduce un numero entero mayor que 1: 1000 


Calcular 


Tiempo empleado: 1 ms 


Primos:2 3 5711 131719 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97101 
103 107 109 113 127 131 137 139 149 151 157 163 167 173 179 181 191 193 197 
199 211 223 227 229 233 239 241 251 257 263 269 271 277 261 283 293 307 311 
313 317 331 337 347 349 353 359 367 373 379 383 389 397 401 409 419 421 431 
433 439 443 449 457 461 463 467 479 487 491 499 503 509 521 523 541 547 557 
563 569 571 577 587 593 599 601 607 613 617 619 631 641 643 647 653 659 661 
673 677 683 691 701 709 719 727 733 739 743 751 757 761 769 773 787 797 809 
811 821 823 827 629 839 853 657 859 863 877 881 883 887 907 911 919 929 937 
941 947 953 967 971 977 983 991 997 
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Figura 18.7 Resultado tras calcular los numeros primos 

18.12 CAPITULO 13 

18.12.1 EJERCICIO 15 

Implementar un servicio de chat, utilizando tecnologfa Web Socket, a partir del codigo 
proporcionado, que se describe a continuacion. 

• Se dispone de un servidor de chat, basado en Node.js, al cual deben conectarse los 
usuarios del chat. La direccion del servidor es ws://WWW.arkaitzgarro.com:1337. 

• Se proporciona la interfaz basica (HTML y JavaScript) para desarrollar la aplicacion. 
Es necesario implementar la conexion con el servidor y el intercambio de mensajes, 
asf como la actualizacion de la interfaz. 

• El protocolo de mensajes es el siguiente: 

• El primer mensaje a enviar al servidor es el nick. Tomad el valor de la caja de 
texto y enviarla al servidor como una cadena de texto. 

• Una vez estamos "registrados" en el servidor, este puede comenzar a enviarnos 
mensajes, tanto los existentes hasta el momento, como los nuevos que se 
produzcan por otros usuarios. Estos mensajes (en formato JSON) 
corresponden con un objeto J avaScript, cuya estructura se muestra a 
continuacion. 

• Finalmente, para enviar los mensajes de texto del usuario, enviarnos la cadena 
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de texto directamente al servidor. 

// Mensaje de tipo "color" 

{ 

type : "color", 

data : "" // Valor del color asignado por el servidor 

} 

// Mensaje de tipo "history" 

{ 

type : "history", 

// Un array que contiene los ultimos mensajes enviados 
data : [{author, text, color, time}] 

} 

// Mensaje de tipo "message" 

{ 

type : "message", 

// Un objeto que contiene un mensaje enviado por otro usuario 
data : {author, text, color, time} 

} 


Descargar sitio web. 


@ O O Chat con WebSockets y Nod^S 

HTML5 @ 16:53: Hey there! Tm using WebSockets. 

Arkaitz @ 16:51: Hola mundol 


HTML5: 
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Figura 18.8 Resultado final del chat 

INDICE DE CONTENIDOS 

Ejercicios 
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18.2 Capitulo 3 
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HTML5 


Anterior Siguiente 


CAPITULO 2 SEMANTICA 


Una de las novedades que hemos mencionado anteriormente son las etiquetas que se 
han introducido en HTML5. Existen mas de 30 nuevas etiquetas semanticas que pueden 
ser utilizadas en nuestras paginas estaticas. Estas nuevas etiquetas se podrian clasificar 
en dos grupos: 

• Etiquetas que extienden a las actuales, como <video>, <audio> 0 <canvas>, y que 
ademas anaden nuevas funcionalidades a los documentos HTML, que podemos 
controlar desde J avaScript y 

• etiquetas que componen la web semantica, es decir, que no proponen nuevas 
funcionalidades pero sirven para estructurar sitios web, y anadir un significado 
concrete, mas alia de las etiquetas generales como <div>. 

En este capitulo, veremos como transformar nuestra estructura actual de marcado 
basada en <div>, a una estructura que utilize las nuevas etiquetas estructurales como 

<nav>, <header>, <footer>, <aside>, 0 <article>. 


2.1 CABECERA DEL DOCUMENTO 

Ademas de las nuevas etiquetas introducidas por HTML5 (que veremos mas adelante), el 
nuevo estandar propone pequenas mejoras que podemos aplicar en la definicion de 
nuestros documentos, en concrete en la cabecera de los mismos. 

2.1.1 DOCTYPE 

El estandar XHTML derive de XML, por lo que comparte con el muchas de sus normas y 
sintaxis. Uno de los conceptos fundamentales de XML es la utilizacion del DTD o 
Document Type Definition ("Definicion del Tipo de Documento"). El estandar XHTML 
define el DTD que deben seguir las paginas y documentos XHTML. En este documento se 
definen las etiquetas que se pueden utilizer, los atributos de cada etiqueta y el tipo de 
valores que puede tener cada atributo. 

<!DOCTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://WWW.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 


Esta es una de las 15 declaraciones posibles declaradas en los estandares HTML4 y 
XHTML. En HTML5 se reduce la definicion del tipo de documento a una unica posibilidad, 
por lo que no tenemos que preocuparnos de elegir el tipo de documento correcto: 


http://www.arkaitzgarro.com/htnil5/capitulo-2.html[13/07/2015 12:44:39] 




Semantica I HTML5 


<!DOCTYPE html> 

2.1.2 ELEMENTO RAIZ HTML 

En todo documento HTML, su elemento rafz o nodo superior siempre es la etiqueta 
<htmi>. Hasta ahora, este elemento rafz se definfa de la siguiente manera: 

<html xmlns=http://www.w3.org/1999/xhtml 
lang="en" 
xml: lang= "en" > 


No hay ningun problema en mantener esta sintaxis. Si se desea, se puede conservar, ya 
que es valido en HTML5. Sin embargo, algunas de sus partes ya no son necesarias, por 
lo que podemos eliminarlas. 

El primer elemento del que podemos prescindir es el atributo xmins. Se trata de una 
herencia de XHTML 1.0, que dice que los elementos de esta pagina estan en el espacio 
de nombres XHTML, http://www.w3.org/i999/xhtmi. Sin embargo, los elementos de 
HTML5 estan siempre en este espacio de nombres, por lo que ya no es necesario 
declararlo explfcitamente. Eliminar el atributo xmins nos deja con este elemento de la 
siguiente manera: 

<html lang="es" xml: lang="en"> 

En este caso ocurre lo mismo con el atributo xmiriang, es una herencia de XHTML que 
podemos eliminar, quedando finalmente la etiqueta de la siguiente manera: 

<html lang="en"> 


2.1.3 ELEMENTO HEAD 

El primer hijo del elemento rafz es generalmente el elemento head. El elemento head 
contiene los metadatos que aportan informacion extra sobre la pagina, como su tftulo, 
descripcion, autor, etc. Ademas, puede incluir referencias externas a contenidos 
necesarios para que el documento se muestre y comporte de manera correcta (como 
hojas de estilos o scripts). Este elemento ha sufrido pequehas variaciones, pero que 
debemos tener en cuenta: 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>My Weblog</title> 

<link rel="stylesheet" type="text/css " href ="style-original.css" /> 
<link rel="alternate" type="application/atom+xml" 

title="My Weblog feed" 
href ="/feed/" /> 

<link rel=" search" type=" application/opensearchdescription+xml" 


http://www.arkaitzgarro.com/htnil5/capitulo-2.html[13/07/2015 12:44:39] 


Semantica I HTML5 


title="My Weblog search" 
href="opensearch.xml" /> 

<link rel="shortcut icon" href ="/favicon.ico" /> 

</head> 

2.1.3.1 CODIFICACION DEL CONTENIDO 

Cuando se piensa en "texto", probablemente nos venga a la cabeza una definicion de 
"caracteres y sfnnbolos que veo en la pantalla de mi ordenador". Pero realmente se 
tratan de bits y bytes. Cada cadena de caracteres que se muestra en la pantalla, se 
almacena con una codificacion de caracteres en particular. Hay cientos de codificaciones 
de caracteres diferentes, algunos optimizado para ciertos idiomas como el ruso, el chino 
0 ingles, y otros que se pueden utilizer para multiples idiomas. En terminos generales, la 
codificacion de caracteres proporciona una correspondencia entre lo que se muestra en 
la pantalla y lo que un equipo realmente almacena en la memoria y en el disco. 

Se puede pensar en la codificacion de caracteres como una especie de clave de 
descifrado del texto. Cuando accedemos a una secuencia de bytes, y decidimos que es 
"texto", lo que necesitamos saber es que codificacion de caracteres se utiliza para que 
pueda decodificar los bytes en caracteres y mostrarlos (o transformarlos) de manera 
correcta. 

Lo ideal es establecer esta codificacion en el servidor, indicando el tipo en las cabeceras 
de respuesta: 


Content-Type: text/html; charset="utf-8" 

Por desgracia, no siempre podemos tener el control sobre la configuracion de un servidor 
HTTP. Por ejempio, en la plataforma Blogger, el contenido es proporcionado por 
personas, pero los servidores son administrados por Google, por lo que estamos 
supeditados a su configuracion. Aun asf, HTML 4 proporciona una manera de especificar 
la codificacion de caracteres en el documento HTML: 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 "> 

El encabezado HTTP es el metodo principal, y anula la etiqueta <meta> si esta presente. 
Pero no todo el mundo puede establecer encabezados HTTP, por lo que la etiqueta 
<meta> todavia tiene sentido. En el caso de HTML5, es aun mas sencillo definir esta 
etiqueta meta: 


<meta charset="utf-8"> 


Debemos acostumbrarnos a especificar la codificacion de nuestros documentos, aunque 
no vayamos a utilizar caracteres especiales o nuestro documentos no se presente en 
otros idiomas. Si no lo hacemos, podemos exponernos a problemas de seguridad. 
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2.1.3.2 LINKS 

Dentro del elemento head, las etiquetas <iink> son una manera de acceder o declarar 

contenido externo al documento actual, que puede cumplir distintos objetivos: 

• Es una hoja de estilo contiene las reglas CSS que su navegador debe aplicar al 
presente documento. 

• Es un feed que contiene el mismo contenido que esta pagina, pero en un formato 
estandar (RSS). 

• Es una traduccion de esta pagina en otro idioma. 

• Es el mismo contenido que esta pagina, pero en formato PDF. 

• Es el proximo capftulo de un libro en Ifnea de la cual esta pagina es tambien una 
parte. 

En HTML5, se separan estas relaciones de enlace en dos categories: 

• Enlaces a recursos externos que se van a utilizer para mejorar el documento actual, 

• y enlaces de hipervinculos que son enlaces a otros documentos. 

El tipo de relacion mas utilizado (literalmente) es el siguiente: 


<link rel="stylesheet" href ="style-original.css" type= "text/css" /> 


Esta relacion es utilizada para indicar el archivo donde se almacenan las reglas CSS que 
se desean aplicar al documento. Una pequena optimizacion que se puede hacer en 
HTML5 es eliminar el atributo type. Solo hay un lenguaje de estilo para la web, CSS, asi 
que ese es el valor predeterminado para el atributo type: 


<link rel="stylesheet" href ="style-original.css" /> 

2.2 NUEVAS ETIQUETAS SEMANTICAS 

En 2004, Ian Hickson, el autor de la especificacion de HTML5, analizo 1.000.000.000 de 
paginas web utilizando el motor de Google, intentando identificar la manera en la que la 
web real estaba construida. Uno de los resultados de este analisis, fue la publicacion de 
una lista con los nombres de clases mas utilizados. Este estudio revela que los 
desarrolladores utilizan clases o IDs comunes para estructurar los documentos. Esto 
llevo a considerar que quizas fuese una buena idea crear etiquetas concretas para 
reflejar estas estructuras. 

Este tipo de etiquetas que componen la web semantica nos sirven para que cualquier 
mecanismo automatico (un navegador, un motor de busqueda, un lector de feeds...) que 
lea un sitio web sepa con exactitud que partes de su contenido corresponden a cada una 
de las partes tfpicas de un sitio. Observando esas etiquetas semanticas estructurales. 
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cualquier sistema podra procesar la pagina y saber como esta estructurada. Veamos 
algunas de estas etiquetas que introduce HTML5 en este sentido. 

• <section></section> : se utlllza para representar una seccion "general" dentro de 
un documento o aplicacion, como un capftulo de un libro. Puede contener 
subsecciones y si lo acompanamos de hi-h6 podemos estructurar mejor toda la 
pagina creando jerarquias del contenido, algo muy favorable para el buen 
posicionamiento web. 

• <article></article> : representa un componente de una pagina que consiste en 
una composicion autonoma en un documento, pagina, aplicacion, o sitio web con la 
intencion de que pueda ser reutilizado y repetido. Podria utilizarse en los artfculos 
de los foros, una revista o el articulo de periodico, una entrada de un blog, un 
comentario escrito por un usuario, un widget interactive o cualquier otro articulo 
independiente de contenido. Cuando los elementos de <articie> son anidados, los 
elementos interiores representan los artfculos que en principio son relacionados con 
el contenido del artfculo externo. Por ejempio, un artfculo de un blog que permite 
comentarios de usuario, dichos comentarios se podrfan representar con <article>. 

• <aside></aside> : representa una seccion de la pagina que abarca un contenido 
relacionado con el contenido que lo rodea, por lo que se le puede considerar un 
contenido independiente. Este elemento puede utilizarse para efectos tipograficos, 
barras laterales, elementos publicitarios, para grupos de elementos de la 
navegacion, u otro contenido que se considere separado del contenido principal de 
la pagina. 

• <header></header> : representa un grupo de artfculos introductorios o de 
navegacion. Esta destinado a contener por lo general la cabecera de la seccion (un 
elemento hi-h6 o un elemento hgroup), pero no es necesario. 

• <nav></nav>: representa una seccion de una pagina que enlaza a otras paginas o a 
otras partes dentro de la pagina. No todos los grupos de enlaces en una pagina 
necesita estar en un elemento nav, solo las secciones que constan de bloques de 
navegacion principales son apropiados para el elemento de navegacion. 

• <footer></footer> : representa el pie de una seccion, con informacion acerca de la 
pagina/seccion que poco tiene que ver con el contenido de la pagina, como el autor, 
el copyright o el aho. 

• <hgroup></hgroup> : representa el encabezado de una seccion. El elemento se utlllza 
para agrupar un conjunto de elementos hi-h6 cuando el tftulo tiene varies niveles, 
tales como subtftulos o tftulos alternatives. 

• <time> : representa o bien una hora (en formate de 24 horas), o una fecha precisa 
en el calendario gregoriano (en formate ISO), opcionalmente con un tiempo y un 
desplazamiento de zona horaria. 
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2.3 ESTRUCTURA DE UN DOCUMENTO HTML5 

Como hemos visto con las nuevas etiquetas semanticas introducidas en HTML5, estas 
aportan un significado concreto al documento que estamos definiendo, y por lo tanto, 
afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver 
como podemos convertir nuestra actual pagina con las nuevas etiquetas introducidas en 
HTML5. 

2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4 

El siguiente codigo muestra una estructura "clasica" de documento HTML, donde los 
diferentes contenidos de la web se encuentran agrupados por etiquetas <div>. Por si 
mismas, estas etiquetas no aportan ningun tipo de significado, y el atributo id tampoco 
se lo proporciona. Si cambiamos <div id="header"> por <div id="whatever"> , el 
significado sigue siendo el mismo, ninguno. 


<div id="header"> 


<div id="nav"> 


<div id="article"> 


<div id="section"> 


<div id="aside"> 


<div id="footer"> 


<DOCTYPE html PUBLIC"-/ /W3C//DTD XHTML 1.0 Transitional//EN" 

"http://WWW.w3.org/TR/xhtml1/DTD/xhtmil-transitional.dtd" > 
<html> 

<body> 

<div id="header"> 

<a href="/"><img src=logo.png alt="home"></a> 

<hl>My Weblog</hl> 

<p class="tagline"> 

A lot of effort went into making this effortless. 

</p> 

</div> 

<div id="nav"> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href= "#" >blog</a></li> 

<li><a href="#">gallery</a></li> 

<li><a href="#">about</a></li> 

</ul> 


http://www.arkaitzgarro.com/htnil5/capitulo-2.html[13/07/2015 12:44:39] 








Semantica I HTML5 


</div> 

<div class="articles "> 

<div class="article"> 

<p class="post-date">October 22, 2009</p> 

<h2> 

<a href="#" title="link to this post">Travel day</a> 
</h2> 

<div class="content "> 

Content goes here... 

</div> 

<div class="comments"> 

<p><a href="#">3 comments</a></p> 

</div> 

</div> 

</div> 

<div class="aside"> 

<div class="related"></div> 

<div class="related"></div> 

<div class="related"></div> 

</div> 

<div id="footer"> 

<p>&#167; </p> 

<p>&#169; 2013&#8211;9 <a href="#">Arkaitz Garro</a></p> 
</div> 

</body> 

</html> 


2.3.2 ESTRUCTURATRADICIONAL DE UN DOCUMENTO EN HTML5 

Veamos como podemos anadir un significado a este documento, unicamente aplicando 
las nuevas etiquetas semanticas incluidas en HTML5. 



<!DOCTYPE html> 
<html> 
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<body> 

<header> 

<a href = " / "ximg src=logo.png alt = "home "></a> 

<hgroup> 

<hl>Title</hl> 

<h2 class="tagline"> 

A lot of effort went into making this effortless. 

</h2> 

</hgroup> 

</header> 

<nav> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href="#">blog</a></li> 

<li><a href="#">gallery</a></li> 

<li><a href ="#">about</a></li> 

</ul> 

</nav> 

<section class="articles"> 

<article> 

<time datetime="2009-10-22">0ctober 22, 2009</time> 

<h2> 

<a href="#" title="link to this post">Travel day</a> 

</h2> 

<div class="content"> 

Content goes here... 

</div> 

<section class="comments"> 

<p><a href="#">3 comments</a></p> 

</section> 

</article> 

</section> 

<aside> 

<div class="related"></div> 

<div class="related"></div> 

<div class="related"></div> 

</aside> 

<footer> 

<p>&#167 ; </p> 

<p>&#169; 2013&#8211;9 <a href ="#">Arkaitz Garro</a></p> 

</footer> 

</body> 

</html> 

Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debennos 
utilizar. Esto no siempre es asi, y cuando estructuramos contenidos de mucho mayor 
alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar 
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en la correcta seleccion de etiquetas, es el que proponen en HTML5 Doctor. 



Doctor 


HTML5 Element Flowchart 

Sectioning content elements ond friends 

By @riddle & @boblet 
www.html5doctor.com 


A block of flow content 
(not inline phrasing content) 


Site or in-page 
navigation (anything 
you’d use a ’’skip to 
nav" link for) 

-» htmlSdoctor.com/nav 


Sidebar, comments 
section, pullquote, 
glossary, advertising, 
footnote etc that’s 
tangentially related to 
the page or content... 



News article, weblog or 
fomm post, comment 
on an article, sidebar 
widget etc, with a 
heading... 

-» html5doctor.com/article 


^ <figure> ^ 


One or more images, 
graphics, code samples 
etc, plus optional 
<figcaption>... 


( <section^ } 

( Appropriate ] 

V_ J 

V element / 


A section of the page, 
or chapter of an 
<article>, with a 
heading... 


Flow content with no 
additional semantics, 
e.g. for CSS hooks... 

-• html5doctor.com/div 


Probably <p>, but 
possibly <address>, 
<blockquote>, <pre>.. 

-* htmlSdoctor. com/semantics 


•Sectioning content element 

"nese foo*’ elements Cond their '>eod ngs) ce ^vSed by 
HTMLS's outlining olgcrithm to moke the oocument’s outline 
-• html5doctor.com/outline 


-» html5doctor.com/figure -• html5doctor.com/section 


20IJ 07-22 vl.S 
For more information: 
v/ww.htmlSdoctorcom/somantics 


2.4 USO DE LAS NUEVAS ETIQUETAS SEMANTICAS 

2.4.1 <HEADER> 

Segun la especificacion, un elemento <header> representa lo siguiente: 

Un grupo de navegacion o contenido introductorio. Un elemento header 
normalmente contiene una seccion de encabezado (un elemento hl-h6 o un 
elemento hgroup), pero puede contener otro tipo de elementos, como una tabla de 
contenidos, un formulario de busqueda o cualquier logo importante. 

En nuestro ejempio, y en la mayoria de los sitios web, la cabecera contiene los primeros 
elementos de la pagina. Tradicionalmente el titulo de la web, su logo, enlaces para 
volver al inicio... De la manera mas simple, nuestra cabecera quedaria de esta forma: 


<header> 

<a href="/"><img src=logo.png alt="home"></a> 
<hl>Title</hl> 

</header> 


Tambien es muy comun que los sitios web muestren un lema o subtftulo bajo el titulo 
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principal. Para dar mayor importancia a este subtitulo, y relacionarlo de alguna manera 
con el tftulo principal de la web, es posible agrupar los dos titulares bajo un elemento 

<hgroup>. 


<header> 

<a href =" / " ximg src = logo.png alt = "home"></a> 

<hgroup> 

<hl>Title</hl> 

<h2 class="tagline"> 

A lot of effort went into making this effortless. 
</h2> 

</hgroup> 

</header> 


2.4.2 <NAV> 

Segun la especificacion, un elemento <nav> representa lo siguiente: 

El elemento <nav> representa una seccion de una pagina que enlaza con otras 
paginas o partes de la misma pagina: una seccion con enlaces de navegacion. 

El elemento <nav> ha sido disehado para identificar la navegacion de un sitio web. La 
navegacion se define como un conjunto de enlaces que hacen referenda a las secciones 
de una pagina o un sitio, pero no todos los enlaces son candidatos de pertenecer a un 
elemento <nav>: una lista de enlaces a patrocinadores o los resultados de una 
busqueda, no forman parte de la navegacion principal, sino que corresponden con el 
contenido de la pagina. 

Como ocurre con los elementos <header>, <footer> y el resto de nuevas etiquetas, no 
estamos obligados a utilizar un unico elemento <nav> en toda la pagina. Es posible que 
tengamos una navegacion principal en la cabecera de la pagina, una tabla de contenidos 
0 enlaces en el pie de la pagina, que apuntan a contenidos secundarios. Todos ellos son 
candidatos a pertenecer a un elemento <nav>. 


<nav> 

<ul> 

<li><a href="#">home</a></li> 

<li><a href ="# ">blog</a></li> 

<li><a href="#">gallery</a></li> 

<li><a href="#">about</a></li> 

</ul> 

</nav> 

2.4.3 <FOOTER> 

Segun la especificacion, un elemento <footer> representa lo siguiente: 
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Representa el pie de una seccion. Un pie tradicionalmente contiene informacion 
acerca de su seccion, como quien escribio el contenido, enlaces relacionados, 
copyright y similares. 

Al igual que ocurre con el elemento <nav>, podemos tener tantos elementos <footer> 
como sea necesario. Lo normal es que nuestro sitio web disponga de al menos un pie 
principal, que contiene los avisos legales (privacidad, condiciones del servicio, 
copyright...), mapa del sitio web, accesibilidad, contacto y otros muchos enlaces que 
pueden ir incluidos en un elemento <nav>. 

2.4.4 <ARTICLE> 

Segun la especificacion, un elemento <article> representa lo siguiente: 

Este elemento representa un contenido completo, auto-contenido en un documento, 
pagina, aplicacion o sitio web, que es, en principio, independiente de ser distribuido 
y reutilizado, por ejempio en un RSS. Puede ser un post de un foro, un artfculo de 
un periodico o revista, una entrada de un blog, un comentario de un usuario, un 
widget o cualquier otro elemento independiente. 

Cuando los articulos estan anidados, los articulos interiores representan contenido 
que en principio esta relacionado con el artfculo que los contiene. Por ejempio, una 
entrada de un blog puede aceptar comentarios de usuarios, que estan incluidos 
dentro del contenido principal y relacionados con el mismo. 

Por lo tanto, la etiqueta <articie> se utiliza para encapsular contenido, que tiene 
significado en sf mismo, y que puede ser distribuido y reutilizado en otros formatos de 
datos. No nos referimos unicamente a contenidos clasicos de texto, sino que incluso un 
contenido multimedia con su transcripcion, un mapa o email pueden ser totalmente 
validos para ser incluidos en una etiqueta <article>. 


<section> 

<hl>Comments</hl> 

<article id="cl"> 

<footer> 

<p>Posted by: <span>George Washington</span></p> 

<p><time datetime="2009-10-10">15 minutes ago</time></p> 
</footer> 

<p>Yeah! Especially when talking about your lobbyist friends !</p> 
</article> 

<article id="c2"> 

<footer> 

<p>Posted by: <span itemprop="name">George Hammond</span></p> 
<p><time datetime="2009-10-10">5 minutes ago</time></p> 

</ footer> 

<p>Hey, you have the same first name as me.</p> 
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</ article> 
</section> 


2.4.5 <SECTION> 

A diferencia del elemento <article>, este elemento es utilizado para dividir el 
documento (o articulos) en diferentes areas, o como su propio nombre indica, en 
secciones. Segun la especificacion, un elemento <section> representa lo siguiente: 

Representa una seccion generica de un documento o aplicacion. Una seccion, en 
este contexto, es un grupo tematico de contenido, que generalmente incluye una 
cabecera. 

Consideremos el siguiente marcado valido en HTML 4: 


<hl>Rules for Munchkins</hl> 

<h2>Yellow Brick Road</h2> 

<p>It is vital that Dorothy follows it—so no selling 
bricks as "souvenirs" </p> 

<h2>Fan Club unif orms</h2> 

<p>All Munchkins are obliged to wear their "I'm a friend 
of Dorothy!" t-shirt when representing the club</p> 
<p><strong>Vital caveat about the information above: 

does not apply on the first Thursday of the month. </strong></p> 


En este caso, y desde un punto de vista semantico, es complicado deducir si el texto Vital 
caveat about the information above: does not apply on the first Thursday of the month, 
pertenece al contenido completo o esta relacionado con la seccion Fan Club uniforms. 
Gracias a la etiqueta <section>, es muy sencillo separar e identificar a que seccion 
pertenece cada contenido: 


<article> 

<hl>Rules for Munchkins</hl> 

<section> 

<h2>Yellow Brick Road</h2> 

<p>It is vital that Dorothy follows it—so no selling 
bricks as "souvenirs" </p> 

</ section> 

<section> 

<h2>Fan Club unif orms</h2> 

<p>All Munchkins are obliged to wear their "I'm a friend 
of Dorothy!" t-shirt when representing the club</p> 

</ section> 

<p><strong>Vital caveat about the information above: 

does not apply on the first Thursday of the month. </strong></p> 
</article> 
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<article> 

<hl>Rules for Munchkins</hl> 

<section> 

<h2>Yellow Brick Road</h2> 

<p>It is vital that Dorothy follows it—so no selling 
bricks as "souvenirs" </p> 

</section> 

<section> 

<h2>Fan Club unif orms</h2> 

<p>All Munchkins are obliged to wear their "I'm a friend 
of Dorothy!" t-shirt when representing the club</p> 
<p><strong>Vital caveat about the information above: 

does not apply on the first Thursday of the month. </strong></p> 
</section> 

</article> 


Como podemos observar en los dos ejemplos anteriores, es muy sencillo agrupar 
contenido que pertenece a una misma seccion, permitiendo incluirlo dentro de un 
contexto semantico. 

Otra de las posibilidades que nos ofrece esta etiqueta, es la de dividir nuestro documento 
en secciones, que incluyen contenido de tematicas diferentes entre si. Si ademas 
queremos separar estos contenidos visualmente en dos columnas, lo logico seria utilizar 
las tradicionales etiquetas <div> para agrupar los articulos segun su tematica, y 
posteriormente aplicar estilos CSS o JavaScript para presentarlos en forma de pestanas. 

En este caso, la etiqueta <div> no nos aporta ningun significado semantico, tan solo 
estructural. La etiqueta <section> es la encargada de anadir semantica en estos casos: 


<section> 

<hl>Articles about llamas</hl> 

<article> 

<h2>The daily llama: Buddhism and South American camelids</h2> 
<p>blah blah</p> 

</article> 

<article> 

<h2>Shh! Do not alarm a llama</h2> 

<p>blah blah</p> 

</ article> 

</section> 

<section> 

<hl>Articles about root vegetables</hl> 

<article> 

<h2>Carrots: the orange miracle</h2> 

<p>blah blah</p> 

</ article> 
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<article> 

<h2>Eat more Swedes (the vegetables, not the people) </h2> 
<p>blah blah</p> 

</article> 

</section> 


2.4.6 <ASIDE> 

Segun la especificacion, un elemento <aside> representa lo siguiente: 

Una seccion de una pagina que consiste en contenido tangencialmente relacionado 
con el contenido alrededor del elemento, y puede considerarse separado de este 
contenido. Estas secciones son normalmente representadas como elementos 
laterales en medios impresos. Este elemento puede utilizarse contener citas, 
anuncios, grupos de elementos de navegacion y cualquier otro contenido separado 
del contenido principal de la pagina. 

Dentro de un articulo, por ejempio, puede ser utilizado para mostrar contenido 
relacionado como citas u otros artfculos relacionados. 

2.4.7 <FIGURE> 

Segun la especificacion, un elemento <figure> representa lo siguiente: 

The figure element represents some flow content, optionally with a caption, that is 
self-contained and is typically referenced as a single unit from the main flow of the 
document. 

The element can be used to annotate illustrations, diagrams, photos, code listings, 
etc. This includes, but is not restricted to, content referred to from the main part of 
the document, but that could, without affecting the flow of the document, be 
moved away from that primary content, e.g. to the side of the page, to dedicated 
pages, or to an appendix. 

Hasta ahora, no habia una manera correcta de poder ahadir un subtftulo o una leyenda a 
un contenido concreto, como explicar una figura o atribuir una imagen a un fotografo. 
Gracias a la etiqueta <figure> podemos contener una imagen (o un video, ilustracion o 
bloque de codigo) en un elemento y relacionarlo con un contenido concreto: 


<f igure> 

<img src="welcome.jpg" alt= "Alternative text"> 
<f igcaption> 

Bruce and Remy welcome questions 

<small>Photo &copy; Bruce's mum</small> 
</f igcaption> 

</figure> 
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En conveniente recordar que el atributo ait indica el texto a mostrar cuando la imagen 
no esta disponible, y no esta pensada para contener una descripcion de la imagen, y 
mucho menos para duplicar lo ya indicado en la etiqueta <figcaption>. 

Ejercicio 1 

Ver enunciado 

2.5 ATRIBUTOS GLOBALES 

HTML5 tambien incluye nuevos atributos globales que pueden ser asignados a cualquier 
elemento. Son los siguientes: 

2.5.1 ACCESSKEY 

El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que 
permite activar un elemento a asignarle el foco. Este atributo ya existia en HTML 4, 
aunque ha sido utilizado en muy pocas ocasiones. Como HTML5 esta pensado para 
aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no 
ha sido eliminado, y ahora esta disponible para cualquier elemento. 

Para evitar conflictos con otros atajos de teclado, o con los propios del navegador, ahora 
esta etiqueta permite asignar alternativas en este atributo. Un ejempio incluido en la 
especificacion: 


<input type=" search" name="q" accesskey="s 0"> 

Esto quiere decir que este elemento es accesible a traves de dos atajos de teclado, a 
traves de la tecia s o a traves de la tecia o (en ese orden). 

2.5.2 CONTENTEDITABLE 

Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta 
contenteditable eS ahora parte de la especificacion oficial. 

La introduccion de esta etiqueta significa principalmente dos cosas: 

• Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta 
etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar 
una marca que indique la posicion actual del cursor. 

• Y segundo, es posible cambiar el formato del texto del contenido, ahadiendo 

negritas, cambiar la fuente, ahadir listas, etc. 

Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder 
desde J avaScript a este atributo, hay que tener en cuenta su notacion lowerCamelCase, 
siendo el nombre de la propiedad del DOM contentEditable . Ademas, existe otra 
propiedad llamada isContentEditable , que indica si el elemento es editable o no. 
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Finalmente, el contenido que ha side seleccionado por el usuario, puede ser objeto de 
modificaciones, como hemos comentado antes. A traves del comando 
element.execCommand () es posible indicar el tipo de modificacion (poner en negrita, 
copiar, cambiar la fuente...), siempre que el documento se haya indicado como editable. 

document.designMode = 'on'; 

Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al 
servidor. No existe ningun API o metodo en JavaScript que nos posibilite esta accion, por 
lo que debemos utilizer algun tipo de tecnologia tipo AJAX. 

2.5.3 DATA-* (CUSTOM DATA ATTRI BUTES) 

HTML5 permite crear atributos personalizados para los elementos. Estos atributos son 
utilizados para pasar informacion a JavaScript. Como veremos en el capftulo 
correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera 
almacenar informacion asociada con elementos, pero esto cambia radicalmente con 
estos atributos. 


<ul id=" vegetable-seeds" > 

<11 data-spacing=" 10cm" data-sowing-time="March to June">Carrots</li> 

<11 data-spacing=" 30cm" data-sowing-time="February to March">Celery</li> 
<11 data-spacing="3cm" data-sowing-time="March to September" >Radishes</li> 
</ul> 

2.5.4 DRAGGABLE 

Este atributo indica que el elemento indicado puede ser arrestable. Lo veremos en el 
capftulo correspondiente. 
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